@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Outfit:wght@400;500;600;700;800&display=swap');

/* --- DESIGN SYSTEM --- */
:root {
  --bg-primary: #09090B;
  --bg-card: rgba(18, 18, 24, 0.65);
  --bg-glass: rgba(15, 15, 20, 0.75);
  --border-color: rgba(255, 255, 255, 0.08);
  --border-focus: rgba(37, 99, 235, 0.5);
  --text-main: #FFFFFF;
  --text-muted: #A1A1AA;
  --accent-blue: #2563EB;
  --accent-cyan: #06B6D4;
  --accent-purple: #8B5CF6;
  --accent-gradient: linear-gradient(135deg, #2563EB, #06B6D4);
  --glass-border: 1px solid rgba(255, 255, 255, 0.08);
  --shadow-sm: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.5);
  --font-sans: 'Inter', sans-serif;
  --font-display: 'Outfit', sans-serif;
  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
}

body {
  background-color: var(--bg-primary);
  color: var(--text-main);
  font-family: var(--font-sans);
  line-height: 1.5;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.025em;
}

a {
  color: inherit;
  text-decoration: none;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* --- HEADER / STICKY NAV --- */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 72px;
  background: var(--bg-glass);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: var(--glass-border);
  z-index: 100;
  display: grid;
  grid-template-columns: minmax(190px, 1fr) auto minmax(190px, 1fr);
  grid-template-areas: "logo nav actions";
  align-items: center;
  padding: 0 4%;
  transition: var(--transition);
}

.header.scrolled {
  background: rgba(9, 9, 11, 0.95);
  height: 64px;
  box-shadow: var(--shadow-lg);
}

.logo {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.4rem;
  letter-spacing: 0.05em;
  background: linear-gradient(to right, #ffffff, #93c5fd, #60a5fa);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: flex;
  align-items: center;
  gap: 8px;
  grid-area: logo;
  justify-self: start;
}

.logo span {
  background: var(--accent-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.main-navigation {
  grid-area: nav;
  justify-self: center;
}

.nav-links {
  display: flex;
  gap: 24px;
  list-style: none;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-muted);
}

.nav-links li a {
  transition: var(--transition);
  position: relative;
  padding: 6px 0;
}

.nav-links li a:hover,
.nav-links li.active a,
.nav-links li a[aria-current="page"] {
  color: #3B82F6;
}

.nav-links li a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--accent-gradient);
  transition: var(--transition);
}

.nav-links li a:hover::after,
.nav-links li.active a::after,
.nav-links li a[aria-current="page"]::after {
  width: 100%;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 16px;
  grid-area: actions;
  justify-self: end;
}

.search-trigger {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 8px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
}

.search-trigger:hover {
  color: #3B82F6;
  background: rgba(255, 255, 255, 0.05);
}

.btn-login {
  background: none;
  border: none;
  color: var(--text-main);
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  padding: 8px 16px;
  transition: var(--transition);
}

.btn-login:hover {
  color: var(--text-muted);
}

.btn-signup {
  background: var(--text-main);
  color: #000;
  border: none;
  font-size: 0.9rem;
  font-weight: 600;
  padding: 8px 20px;
  border-radius: 20px;
  cursor: pointer;
  transition: var(--transition);
}

.btn-signup:hover {
  background: #e4e4e7;
  transform: translateY(-1px);
}

/* --- HERO SECTION --- */
.hero {
  position: relative;
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 100px 4% 60px;
  text-align: center;
  background-image: linear-gradient(to bottom, rgba(9, 9, 11, 0.4), rgba(9, 9, 11, 1)), url('assets/images/hero_bg.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  margin-bottom: 24px;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(15, 23, 42, 0.4) 0%, rgba(9, 9, 11, 0.95) 80%);
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 800px;
  width: 100%;
}

.tagline-badge {
  display: inline-flex;
  align-items: center;
  background: rgba(37, 99, 235, 0.15);
  border: 1px solid rgba(37, 99, 235, 0.3);
  color: #93c5fd;
  padding: 6px 16px;
  border-radius: 30px;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  margin-bottom: 24px;
  text-transform: uppercase;
}

.hero-title {
  font-size: 3.5rem;
  line-height: 1.1;
  font-weight: 800;
  margin-bottom: 16px;
  background: linear-gradient(to bottom, #ffffff 60%, #a1a1aa);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-subtitle {
  font-size: 1.15rem;
  color: var(--text-muted);
  max-width: 600px;
  margin: 0 auto 32px;
}

/* Search Box & Autocomplete */
.search-container {
  position: relative;
  max-width: 580px;
  width: 100%;
  margin: 0 auto 32px;
}

.search-box-wrapper {
  display: flex;
  align-items: center;
  background: rgba(15, 15, 20, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50px;
  padding: 6px 6px 6px 24px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: var(--transition);
}

.search-box-wrapper:focus-within {
  border-color: var(--accent-blue);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.25);
}

.search-icon-input {
  color: var(--text-muted);
  margin-right: 12px;
  display: flex;
}

.search-input {
  background: none;
  border: none;
  color: var(--text-main);
  font-size: 1.05rem;
  width: 100%;
  padding: 8px 0;
  outline: none;
  font-family: var(--font-sans);
}

.search-input::placeholder {
  color: var(--text-muted);
}

.btn-search {
  background: var(--accent-gradient);
  color: #fff;
  border: none;
  padding: 10px 24px;
  border-radius: 50px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
}

.btn-search:hover {
  opacity: 0.95;
  transform: scale(1.02);
}

.autocomplete-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--bg-glass);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: var(--glass-border);
  border-radius: 16px;
  margin-top: 8px;
  max-height: 320px;
  overflow-y: auto;
  z-index: 10;
  box-shadow: var(--shadow-lg);
  text-align: left;
  display: none;
}

.autocomplete-dropdown.active {
  display: block;
}

.autocomplete-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  cursor: pointer;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  transition: var(--transition);
}

.autocomplete-item:last-child {
  border-bottom: none;
}

.autocomplete-item:hover {
  background: rgba(255, 255, 255, 0.05);
}

.autocomplete-info {
  display: flex;
  flex-direction: column;
}

.autocomplete-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-main);
}

.autocomplete-meta {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 2px;
}

.hero-buttons {
  display: flex;
  gap: 16px;
  justify-content: center;
}

.btn-hero-primary {
  background: var(--accent-gradient);
  color: #fff;
  border: none;
  font-weight: 600;
  font-size: 1rem;
  padding: 12px 28px;
  border-radius: 8px;
  cursor: pointer;
  transition: var(--transition);
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-hero-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(37, 99, 235, 0.4);
}

.btn-hero-secondary {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.15);
  font-weight: 600;
  font-size: 1rem;
  padding: 12px 28px;
  border-radius: 8px;
  cursor: pointer;
  backdrop-filter: blur(4px);
  transition: var(--transition);
}

.btn-hero-secondary:hover {
  background: rgba(255, 255, 255, 0.15);
  transform: translateY(-2px);
}

.btn-hero-share {
  color: #93c5fd;
  border: 1px solid rgba(59, 130, 246, 0.38);
  background: rgba(37, 99, 235, 0.1);
  font-weight: 600;
  font-size: 1rem;
  padding: 12px 24px;
  border-radius: 8px;
  transition: var(--transition);
}

.btn-hero-share:hover {
  color: #fff;
  background: rgba(37, 99, 235, 0.22);
  transform: translateY(-2px);
}

.nav-share-mobile { display: none; }
.feature-share-prompt { display: none !important; }

/* --- CATEGORY STRIP --- */
.category-strip-container {
  padding: 0 4%;
  margin-bottom: 40px;
  position: relative;
  overflow: hidden;
}

.category-strip {
  display: flex;
  gap: 12px;
  width: max-content;
  max-width: 100%;
  margin-inline: auto;
  overflow-x: auto;
  padding: 4px 4px 12px;
  scroll-behavior: smooth;
}

.category-strip::-webkit-scrollbar {
  height: 4px;
}

.category-pill {
  flex: 0 0 auto;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text-muted);
  padding: 8px 18px;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition);
}

.category-pill:hover,
.category-pill.active {
  background: var(--text-main);
  color: #000;
  border-color: var(--text-main);
  box-shadow: 0 4px 12px rgba(255, 255, 255, 0.15);
}

/* --- SECTION GENERALS --- */
.section {
  padding: 0 4%;
  margin-bottom: 56px;
  position: relative;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 24px;
}

.section-title {
  font-size: 1.8rem;
  font-weight: 700;
  background: linear-gradient(to right, #fff, #d4d4d8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.section-subtitle {
  font-size: 0.95rem;
  color: var(--text-muted);
  margin-top: 4px;
}

/* --- PROMPT CARD --- */
.card {
  position: relative;
  background: var(--bg-card);
  border: var(--glass-border);
  border-radius: 16px;
  overflow: hidden;
  transition: var(--transition);
  display: flex;
  flex-direction: column;
  height: 380px;
}

.card:hover {
  transform: translateY(-8px);
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.7);
}

.card-image-area {
  position: relative;
  height: 160px;
  width: 100%;
  background-size: cover;
  background-position: center;
  overflow: hidden;
  transition: var(--transition);
}

.card:hover .card-image-area {
  filter: brightness(1.1);
}

.card-play-badge {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 3px;
  border-radius: 50%;
  background: rgba(9, 9, 11, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #fff;
  font-size: 1rem;
}

.card-badges {
  position: absolute;
  top: 12px;
  left: 12px;
  right: 12px;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
}

.badge {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 30px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.badge-cat {
  background: rgba(15, 23, 42, 0.75);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.badge-tool {
  background: rgba(37, 99, 235, 0.85);
  color: #fff;
}

.badge-tool.claude { background: rgba(217, 119, 6, 0.85); }
.badge-tool.gemini { background: rgba(13, 148, 136, 0.85); }
.badge-tool.midjourney { background: rgba(124, 58, 237, 0.85); }
.badge-tool.flux { background: rgba(219, 39, 119, 0.85); }
.badge-tool.cursor { background: rgba(9, 9, 11, 0.85); border: 1px solid rgba(255, 255, 255, 0.2); }

.card-content {
  padding: 20px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.card-title {
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 8px;
  line-height: 1.3;
  color: var(--text-main);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  height: 3rem;
}

.card-desc {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 16px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.4;
  height: 3.5rem;
}

.card-footer {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  padding-top: 12px;
}

.card-metrics {
  display: flex;
  gap: 12px;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.metric-item {
  display: flex;
  align-items: center;
  gap: 4px;
}

.btn-card-copy {
  background: rgba(255, 255, 255, 0.08);
  border: none;
  color: var(--text-main);
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  transition: var(--transition);
}

.btn-card-copy:hover {
  background: var(--text-main);
  color: #000;
}

/* --- TRENDING PROMPTS (GRID) --- */
.grid-trending {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 20px;
}

@media (min-width: 640px) {
  .grid-trending { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .grid-trending { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1280px) {
  .grid-trending { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* --- NETFLIX CAROUSEL --- */
.carousel-container {
  position: relative;
  width: 100%;
}

.carousel-track-wrapper {
  overflow-x: auto;
  scroll-behavior: smooth;
  padding: 10px 4px 20px;
  display: flex;
  gap: 20px;
}

.carousel-track-wrapper::-webkit-scrollbar {
  display: none;
}

.carousel-track-wrapper .card {
  flex: 0 0 280px;
}

.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(9, 9, 11, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #fff;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  cursor: pointer;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(8px);
  transition: var(--transition);
  opacity: 0;
}

.carousel-container:hover .carousel-btn {
  opacity: 1;
}

.carousel-btn:hover {
  background: var(--text-main);
  color: #000;
  transform: translateY(-50%) scale(1.1);
}

.carousel-btn-prev { left: -20px; }
.carousel-btn-next { right: -20px; }

/* --- GALLERIES (IMAGE & VIDEO) --- */
.gallery-layout {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 24px;
}

@media (min-width: 640px) {
  .gallery-layout { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .gallery-layout { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.gallery-card {
  height: 420px;
}

.gallery-card .card-image-area {
  height: 220px;
}

/* --- MAIN & SIDEBAR PAGE STRUCTURE (HOME) --- */
.main-layout {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 0 4%;
  margin: 0 auto 56px;
  max-width: 1400px;
}

.content-area {
  width: 100%;
}

/* --- DETAILS PAGE OVERLAY / MODAL --- */
.details-overlay {
  position: fixed;
  inset: 0;
  background: rgba(9, 9, 11, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  z-index: 200;
  display: none;
  justify-content: center;
  align-items: flex-start;
  overflow-y: auto;
  padding: 40px 16px;
}

.details-overlay.active {
  display: flex;
}

.details-modal {
  background: #0f0f15;
  border: var(--glass-border);
  border-radius: 20px;
  max-width: 1000px;
  width: 100%;
  position: relative;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  animation: modalFadeUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes modalFadeUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.btn-close-modal {
  position: absolute;
  top: 20px;
  right: 20px;
  background: rgba(255, 255, 255, 0.08);
  border: none;
  color: #fff;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  transition: var(--transition);
}

.btn-close-modal:hover {
  background: var(--text-main);
  color: #000;
  transform: rotate(90deg);
}

.details-hero {
  height: 240px;
  background-size: cover;
  background-position: center;
  position: relative;
}

.details-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent, #0f0f15);
}

.details-body {
  padding: 32px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}

@media (min-width: 768px) {
  .details-body {
    grid-template-columns: 1fr 1fr;
  }
}

.details-info {
  display: flex;
  flex-direction: column;
}

.details-meta-row {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.details-title {
  font-size: 2.2rem;
  line-height: 1.2;
  margin-bottom: 16px;
  color: var(--text-main);
}

.details-tagline {
  font-size: 1.05rem;
  color: var(--text-muted);
  margin-bottom: 24px;
}

.prompt-actions {
  display: flex;
  gap: 12px;
  margin-bottom: 24px;
}

.btn-action-primary {
  background: var(--accent-gradient);
  color: #fff;
  border: none;
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: var(--transition);
}

.btn-action-primary:hover {
  box-shadow: 0 4px 15px rgba(37, 99, 235, 0.4);
  transform: translateY(-1px);
}

.btn-action-outline {
  background: rgba(255, 255, 255, 0.05);
  border: var(--glass-border);
  color: #fff;
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: var(--transition);
}

.btn-action-outline:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-1px);
}

.btn-action-outline.favorited {
  color: #f43f5e;
  border-color: rgba(244, 63, 94, 0.5);
  background: rgba(244, 63, 94, 0.1);
}

/* Prompt Box */
.prompt-box-container {
  background: #09090b;
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  padding: 20px;
  position: relative;
  margin-top: 12px;
}

.prompt-box-header {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.prompt-box-text {
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.95rem;
  color: #e4e4e7;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 240px;
  overflow-y: auto;
  padding-right: 8px;
}

/* Accordion sections */
.details-accordion {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.accordion-item {
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  padding-bottom: 16px;
}

.accordion-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  padding: 8px 0;
  transition: var(--transition);
}

.accordion-header:hover {
  color: var(--accent-cyan);
}

.accordion-icon {
  transition: var(--transition);
}

.accordion-item.active .accordion-icon {
  transform: rotate(180deg);
}

.accordion-content {
  display: none;
  font-size: 0.9rem;
  color: var(--text-muted);
  padding-top: 12px;
  line-height: 1.6;
}

.accordion-item.active .accordion-content {
  display: block;
}

.list-steps {
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.faq-item {
  margin-bottom: 12px;
}

.faq-q {
  font-weight: 600;
  color: var(--text-main);
  margin-bottom: 4px;
}

.faq-a {
  color: var(--text-muted);
}

.output-box {
  background: rgba(255, 255, 255, 0.02);
  border: 1px dashed rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 16px;
  font-family: var(--font-sans);
  font-size: 0.9rem;
  white-space: pre-wrap;
  color: #e4e4e7;
}

.related-section {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 32px;
  background: rgba(0, 0, 0, 0.15);
}

.related-grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 20px;
  margin-top: 16px;
}

@media (min-width: 640px) {
  .related-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* --- FOOTER --- */
.footer {
  background: #050508;
  border-top: var(--glass-border);
  padding: 48px 4% 32px;
  text-align: center;
}

.footer-logo {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.6rem;
  margin-bottom: 16px;
}

.footer-logo span {
  background: var(--accent-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.footer-links {
  display: flex;
  justify-content: center;
  gap: 24px;
  list-style: none;
  margin-bottom: 32px;
  flex-wrap: wrap;
}

.footer-links a {
  color: var(--text-muted);
  font-size: 0.9rem;
  transition: var(--transition);
}

.footer-links a:hover {
  color: var(--text-main);
}

.footer-copyright {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.3);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  padding-top: 24px;
}

/* --- AD SECTION (ADSENSE READY) --- */
.ad-banner {
  background: rgba(255, 255, 255, 0.02);
  border: 1px dashed rgba(255, 255, 255, 0.08);
  padding: 20px;
  text-align: center;
  border-radius: 12px;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.2);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 32px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 90px;
}

/* --- TOAST NOTIFICATION --- */
.toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 300;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.toast {
  background: var(--bg-glass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(37, 99, 235, 0.3);
  color: #fff;
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 500;
  font-size: 0.9rem;
  box-shadow: var(--shadow-lg);
  display: flex;
  align-items: center;
  gap: 8px;
  animation: toastSlideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes toastSlideIn {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.toast.fade-out {
  animation: toastFadeOut 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes toastFadeOut {
  to {
    opacity: 0;
    transform: translateY(-20px) scale(0.9);
  }
}

/* --- BLOG PORTAL --- */
.blog-index,.article-page{padding-top:110px}
.blog-portal-hero{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:28px;align-items:stretch;padding:26px 4% 22px;max-width:1240px;margin:0 auto 18px}
.blog-hero-copy{display:flex;flex-direction:column;justify-content:center;min-height:360px;border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:clamp(28px,5vw,58px);background:radial-gradient(circle at 18% 10%,rgba(37,99,235,.24),transparent 32%),linear-gradient(135deg,rgba(18,18,24,.92),rgba(9,9,11,.74))}
.blog-hero-copy h1{max-width:820px;font-size:clamp(2.35rem,5vw,5.15rem);line-height:.98;margin:14px 0 18px}
.blog-hero-copy p{max-width:720px;color:#d4d4d8;font-size:1.1rem;line-height:1.75}
.blog-hero-panel{display:grid;gap:14px;align-content:center;border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:28px;background:rgba(18,18,24,.62);box-shadow:var(--shadow-sm)}
.blog-hero-panel strong{font:800 3.8rem/1 var(--font-display);color:#fff}
.blog-hero-panel>span,.blog-hero-panel small{color:var(--text-muted)}
.blog-hero-panel div{padding-top:18px;border-top:1px solid rgba(255,255,255,.08)}
.blog-hero-panel b{display:block;font:800 1.45rem/1.2 var(--font-display);color:#93c5fd}
.blog-search{width:min(760px,100%);margin-top:28px;display:flex;gap:10px;background:rgba(15,15,20,.78);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:8px}
.blog-search input,.blog-newsletter input{flex:1;min-width:0;background:rgba(255,255,255,.04);border:1px solid transparent;border-radius:8px;color:#fff;font:inherit;padding:13px 14px;outline:0}
.blog-search input:focus,.blog-newsletter input:focus{border-color:var(--border-focus)}
.blog-search input::placeholder,.blog-newsletter input::placeholder{color:var(--text-muted)}
.blog-top-ad{max-width:1160px;margin:0 auto 28px}
.blog-category-strip{margin:0 auto 48px;justify-content:center;flex-wrap:wrap;padding-inline:4%}
.blog-category-strip .category-pill span{margin-left:6px;color:inherit;opacity:.7}
.blog-content-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:28px;align-items:start;max-width:1240px;margin-inline:auto}
.blog-main-feed,.blog-index-sidebar{min-width:0}
.blog-index-sidebar{display:grid;gap:18px;position:sticky;top:92px}
.blog-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.blog-card{background:var(--bg-card);border:var(--glass-border);border-radius:14px;overflow:hidden;display:flex;flex-direction:column;min-height:100%;box-shadow:var(--shadow-sm);transition:var(--transition)}
.blog-card:hover{transform:translateY(-5px);border-color:rgba(96,165,250,.34);box-shadow:0 18px 44px rgba(0,0,0,.36)}
.blog-card-media{aspect-ratio:3/2;background:linear-gradient(135deg,rgba(37,99,235,.45),rgba(6,182,212,.28));background-size:cover;background-position:center;display:flex;align-items:flex-end;padding:16px}
.blog-card-media span,.article-kicker span:not(.badge){background:rgba(9,9,11,.82);border:1px solid rgba(255,255,255,.14);border-radius:999px;color:#bfdbfe;font-size:.78rem;font-weight:700;padding:6px 10px}
.blog-card-body{padding:16px;display:flex;flex-direction:column;gap:10px;flex:1}
.blog-card-meta{display:flex;flex-wrap:wrap;gap:10px;color:var(--text-muted);font-size:.82rem}
.blog-card-body h3{font-size:1.02rem;line-height:1.3;letter-spacing:0}
.blog-card-body p{color:var(--text-muted);font-size:.88rem;line-height:1.58;flex:1}
.blog-card-footer{display:flex;flex-direction:column;align-items:stretch;gap:8px;margin-top:auto;color:var(--text-muted);font-size:.82rem}
.blog-feature-section{max-width:1240px;margin-inline:auto}
.blog-feature-card{display:grid;grid-template-columns:1.08fr .92fr;min-height:430px;overflow:hidden;border:1px solid rgba(255,255,255,.09);border-radius:18px;background:rgba(18,18,24,.62)}
.blog-feature-media{background:linear-gradient(135deg,rgba(37,99,235,.38),rgba(6,182,212,.24));background-size:cover;background-position:center;min-height:320px}
.blog-feature-content{display:flex;flex-direction:column;justify-content:center;gap:16px;padding:clamp(26px,4vw,44px)}
.blog-feature-content h2{font-size:clamp(1.8rem,3vw,3rem);line-height:1.05;letter-spacing:0}
.blog-feature-content p{color:#d4d4d8;font-size:1rem;line-height:1.75}
.blog-feature-content .btn-hero-primary{align-self:flex-start}
.sidebar-panel,.blog-cta,.article-author-box{background:rgba(15,15,20,.82);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:22px}
.sidebar-panel h2,.blog-cta h2,.article-author-box h2{font-size:1.25rem;margin-bottom:8px;letter-spacing:0}
.sidebar-panel p,.blog-cta p,.article-author-box p{color:var(--text-muted);line-height:1.65}
.blog-newsletter form{display:grid;gap:10px;margin-top:16px}
.blog-newsletter .btn-hero-primary{justify-content:center}
.blog-rank-list{display:grid;gap:14px;counter-reset:rank;list-style:none}
.blog-rank-list li{display:grid;grid-template-columns:28px 1fr;gap:10px;align-items:start;color:var(--text-muted)}
.blog-rank-list li::before{counter-increment:rank;content:counter(rank);display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:rgba(37,99,235,.16);color:#93c5fd;font-weight:800;font-size:.76rem}
.blog-rank-list a{color:#fff;font-weight:700;line-height:1.35}
.blog-rank-list span{grid-column:2;color:var(--text-muted);font-size:.78rem;margin-top:-4px}
.blog-rank-list.compact li{grid-template-columns:24px 1fr}
.blog-mini-list{display:grid;gap:12px}
.blog-mini-list a{display:grid;gap:4px;padding-bottom:12px;border-bottom:1px solid rgba(255,255,255,.08);font-weight:700;line-height:1.35}
.blog-mini-list a:last-child{border-bottom:0;padding-bottom:0}
.blog-mini-list span{color:#93c5fd;font-size:.72rem;text-transform:uppercase;letter-spacing:.08em}
.blog-grid-ad{grid-column:1/-1;margin:0;min-height:120px}
.blog-pagination{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:30px}
.blog-pagination a{display:grid;place-items:center;min-width:38px;height:38px;border:1px solid rgba(255,255,255,.1);border-radius:10px;background:rgba(255,255,255,.04);color:#d4d4d8;font-weight:800}
.blog-pagination a.active,.blog-pagination a:hover{background:#fff;color:#000;border-color:#fff}
.article-layout{max-width:1180px;margin:0 auto}
.breadcrumbs{display:flex;gap:10px;flex-wrap:wrap;align-items:center;max-width:1180px;margin:0 auto 24px;padding:0 4%;color:var(--text-muted);font-size:.86rem}
.breadcrumbs a{color:#93c5fd}
.article-header{max-width:940px;margin:0 auto 28px;text-align:center;padding:0 4%}
.article-kicker{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;align-items:center}
.article-header h1{font-size:clamp(2rem,4vw,3.35rem);line-height:1.08;margin:18px 0;letter-spacing:0}
.article-header p{color:#d4d4d8;font-size:1.15rem;line-height:1.7}
.article-meta{justify-content:center;margin-top:18px}
.article-share{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:20px}
.article-share a{border:1px solid rgba(255,255,255,.1);border-radius:999px;background:rgba(255,255,255,.05);color:#d4d4d8;font-weight:700;font-size:.84rem;padding:8px 12px}
.article-share a:hover{background:#fff;color:#000}
.article-cover{width:calc(100% - 8%);max-width:1180px;max-height:820px;object-fit:cover;border-radius:16px;border:1px solid rgba(255,255,255,.1);margin:22px auto 26px;display:block}
.article-top-ad{max-width:1040px;margin:0 auto 30px}
.article-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:30px;align-items:start;padding:0 4%}
.article-content{min-width:0;background:rgba(18,18,24,.42);border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:clamp(22px,4vw,48px)}
.article-content h2,.article-content h3,.article-content h4{scroll-margin-top:96px;margin:34px 0 14px;letter-spacing:0}
.article-content h2{font-size:clamp(1.55rem,3vw,2.15rem)}
.article-content h3{font-size:1.35rem}
.article-content p,.article-content li,.article-content blockquote{color:#d4d4d8;font-size:1.03rem;line-height:1.86}
.article-content p+p{margin-top:16px}
.article-content ul,.article-content ol{padding-left:24px;margin:16px 0}
.article-content a:not(.btn-card-more):not(.btn-hero-primary){color:#93c5fd;text-decoration:underline;text-underline-offset:3px}
.article-content blockquote{border-left:3px solid var(--accent-cyan);padding:16px 0 16px 18px;margin:24px 0;color:#f4f4f5;background:rgba(6,182,212,.05)}
.article-content pre,.article-content code{background:#050507;border:1px solid rgba(255,255,255,.1);border-radius:8px}
.article-content code{padding:2px 6px}
.article-content pre{padding:16px;overflow:auto;margin:18px 0}
.article-content img{max-width:100%;height:auto;border-radius:12px}
.article-content img.article-image-25{display:block;width:25%;margin-inline:auto}.article-content img.article-image-50{display:block;width:50%;margin-inline:auto}.article-content img.article-image-75{display:block;width:75%;margin-inline:auto}.article-content img.article-image-100{display:block;width:100%;margin-inline:auto}
.article-content img.article-align-left{display:block;margin-left:0;margin-right:auto}.article-content img.article-align-center{display:block;margin-left:auto;margin-right:auto}.article-content img.article-align-right{display:block;margin-left:auto;margin-right:0}
.article-content .article-text-left{text-align:left}.article-content .article-text-center{text-align:center}.article-content .article-text-right{text-align:right}.article-content .article-text-justify{text-align:justify}
.article-inline-ad{margin:32px 0}
.article-sidebar{position:sticky;top:92px;display:grid;gap:18px;align-self:start}
.article-toc nav{display:grid;gap:9px}
.article-toc a{color:#d4d4d8;font-size:.9rem;line-height:1.35}
.article-toc a:hover{color:#93c5fd}
.article-toc .toc-level-3{padding-left:14px;color:var(--text-muted);font-size:.84rem}
.blog-cta{margin-top:34px;text-align:center}
.blog-cta .btn-hero-primary{display:inline-flex;margin-top:18px}
.article-prompt-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:22px;text-align:left}
.article-prompt-grid .card{height:420px}
.article-tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:28px}
.article-tags span{border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.05);border-radius:999px;color:#cbd5e1;font-size:.82rem;padding:6px 10px}
.article-author-box{display:flex;justify-content:space-between;gap:20px;align-items:center;margin-top:34px;text-align:left}
.article-author-box span{display:block;color:#93c5fd;font-size:.76rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;margin-bottom:6px}
.article-prev-next{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:24px}
.article-prev-next a{display:grid;gap:6px;border:1px solid rgba(255,255,255,.1);border-radius:12px;background:rgba(255,255,255,.04);padding:18px;font-weight:800;line-height:1.35}
.article-prev-next span{color:#93c5fd;font-size:.76rem;text-transform:uppercase;letter-spacing:.08em}
.article-end-ad{margin-bottom:0}
.article-related-section{max-width:1240px;margin:56px auto 0}
@media(max-width:1080px){.blog-portal-hero,.blog-content-layout,.article-grid{grid-template-columns:1fr}.blog-index-sidebar,.article-sidebar{position:static}.blog-grid,.article-prompt-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.blog-feature-card{grid-template-columns:1fr}}
@media(max-width:720px){.blog-index,.article-page{padding-top:92px}.blog-portal-hero{padding-top:10px}.blog-hero-copy{min-height:auto}.blog-hero-panel{grid-template-columns:1fr 1fr}.blog-hero-panel strong,.blog-hero-panel>span{grid-column:1/-1}.blog-search{flex-direction:column}.blog-search .btn-search{width:100%}.blog-grid,.article-prompt-grid,.article-prev-next{grid-template-columns:1fr}.article-content{padding:22px}.article-author-box{display:grid}.article-header{text-align:left}.article-kicker,.article-meta,.article-share{justify-content:flex-start}.breadcrumbs{font-size:.78rem}.article-cover{width:calc(100% - 32px)}}

/* --- BLOG PRODUCT ALIGNMENT --- */
.blog-hero-minimal{position:relative;min-height:620px;display:flex;align-items:center;justify-content:center;padding:118px 4% 76px;background-image:linear-gradient(to bottom,rgba(9,9,11,.36),rgba(9,9,11,1)),url('assets/images/hero_bg.png');background-size:cover;background-position:center;overflow:hidden}
.blog-hero-content{position:relative;z-index:1;width:min(980px,100%);margin-inline:auto;text-align:center;display:flex;flex-direction:column;align-items:center}
.blog-hero-content .hero-title{max-width:900px}
.blog-hero-content .hero-subtitle{max-width:760px}
.blog-hero-content .blog-search{margin:28px auto 0}
.blog-home-content{padding-top:56px}
.blog-category-strip-wrap{padding:0;margin:0 0 48px}
.blog-category-strip{width:100%;justify-content:center}
.blog-home-content>.section{padding-inline:0}
.blog-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.blog-card{border-radius:16px;background:linear-gradient(145deg,rgba(24,24,32,.76),rgba(10,10,15,.92));border:1px solid rgba(255,255,255,.09)}
.blog-card-body h3{letter-spacing:0}
.blog-card-footer .btn-card-more{min-width:auto}
.blog-readable-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 34px;border-top:1px solid var(--border-color)}
.blog-readable-list a{display:grid;grid-template-columns:48px minmax(0,1fr);gap:6px 18px;padding:22px 0;border-bottom:1px solid var(--border-color);transition:var(--transition)}
.blog-readable-list a:hover{transform:translateX(4px)}
.blog-readable-list span{grid-row:1/3;color:#60a5fa;font:800 1.05rem var(--font-display)}
.blog-readable-list strong{font-size:1.05rem;line-height:1.35}
.blog-readable-list small{color:var(--text-muted);font-size:.84rem}
.blog-tool-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.blog-tool-card{min-height:230px}
.blog-newsletter-section{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,440px);gap:28px;align-items:center;padding:34px!important;border:1px solid rgba(255,255,255,.08);border-radius:18px;background:rgba(15,15,20,.42)}
.blog-newsletter-section form{display:flex;gap:10px}
.blog-newsletter-section input{flex:1;min-width:0;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:8px;color:#fff;font:inherit;padding:13px 14px;outline:0}
.blog-newsletter-section input:focus{border-color:var(--border-focus)}
.blog-pagination{margin-bottom:10px}
.article-page{padding-top:112px}
.article-layout{max-width:1160px}
.article-header{max-width:920px;margin-bottom:36px}
.article-header h1{letter-spacing:0}
.article-grid{grid-template-columns:minmax(0,760px) 260px;justify-content:center;gap:56px}
.article-content{background:transparent;border:0;border-radius:0;padding:0}
.article-content h2:first-child{margin-top:0}
.article-content p,.article-content li,.article-content blockquote{font-size:1.08rem;line-height:1.9}
.article-sidebar{top:98px}
.article-sidebar .sidebar-panel{background:transparent;border:0;border-radius:0;padding:0 0 20px;border-bottom:1px solid var(--border-color)}
.article-toc h2,.article-sidebar .sidebar-panel h2{font-size:.86rem;text-transform:uppercase;letter-spacing:.1em;color:#a1a1aa}
.article-toc a{font-size:.88rem;color:#d4d4d8}
.article-share a{border-radius:8px}
.article-author-box,.blog-cta{border-radius:16px;background:linear-gradient(145deg,rgba(24,24,32,.76),rgba(10,10,15,.92));border:1px solid rgba(255,255,255,.09)}
.article-prompt-grid .card{min-height:420px}
@media(max-width:1100px){.blog-tool-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.article-grid{grid-template-columns:1fr}.article-sidebar{position:static;max-width:760px;margin-inline:auto}.article-sidebar .sidebar-panel{padding:18px 0}.article-content{max-width:760px;margin-inline:auto}}
@media(max-width:760px){.blog-hero-minimal{min-height:auto;padding:108px 4% 58px}.blog-readable-list,.blog-tool-grid,.blog-newsletter-section{grid-template-columns:1fr}.blog-newsletter-section{padding:24px!important}.blog-newsletter-section form{display:grid}.blog-grid{grid-template-columns:1fr}.blog-home-content{padding-top:36px}.article-content p,.article-content li,.article-content blockquote{font-size:1rem}.article-grid{gap:30px}}

/* --- BLOG EDITORIAL HUB --- */
.ad-leaderboard{width:min(728px,100%);min-height:90px;margin:0 auto 28px}
.ad-skyscraper{width:100%;min-height:600px;margin:0}
.ad-rectangle{width:100%;min-height:250px;margin:0}
.blog-category-card-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.blog-category-card{min-height:260px}
.blog-category-card .category-card-content{display:grid;gap:8px}
.blog-category-card strong{font:750 1.18rem var(--font-display);letter-spacing:0}
.blog-category-card small{color:#60a5fa;font-weight:800}
.blog-category-card em{color:var(--text-muted);font-size:.86rem;line-height:1.55;font-style:normal}
.blog-featured-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.blog-featured-grid .blog-card h3{font-size:1.28rem}
.blog-popular-grid .blog-card{position:relative}
.blog-popular-grid .blog-card::before{content:"Mais lido";position:absolute;z-index:2;top:14px;left:14px;padding:6px 10px;border-radius:999px;background:rgba(37,99,235,.82);color:#fff;font-size:.72rem;font-weight:800}
.blog-category-sections{display:grid;gap:34px}
.blog-category-block{padding:26px;border:1px solid rgba(255,255,255,.08);border-radius:18px;background:rgba(15,15,20,.36)}
.blog-category-block>.section-header{margin-bottom:18px}
.blog-category-block h3{font-size:1.55rem;letter-spacing:0}
.blog-category-block p{color:var(--text-muted);margin-top:4px}
.compact-blog-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.compact-blog-grid .blog-card-body{padding:18px}
.compact-blog-grid .blog-card h3{font-size:1.04rem}
.envato-pagination{gap:10px;margin-top:36px}
.envato-pagination a,.envato-pagination span{display:grid;place-items:center;min-width:42px;height:42px;padding:0 14px;border:1px solid rgba(255,255,255,.1);border-radius:8px;background:rgba(255,255,255,.04);color:#d4d4d8;font-weight:800}
.envato-pagination a:first-child,.envato-pagination a:last-child{min-width:92px}
.envato-pagination a.active,.envato-pagination a:hover{background:var(--accent-gradient);color:#fff;border-color:transparent}
.article-main-column{min-width:0}
.article-after-section{margin-top:46px}
.article-after-section .section-header{padding:0;margin-bottom:20px}
.article-after-section .section-title{font-size:1.7rem}
.article-grid{grid-template-columns:minmax(0,790px) 300px;gap:50px}
.article-sidebar{max-height:none;overflow:visible;padding-right:0}
.article-sidebar .ad-banner{border-radius:12px}
.sidebar-category-list{display:grid;gap:8px}
.sidebar-category-list a{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.07);color:#f4f4f5;font-weight:700}
.sidebar-category-list a:last-child{border-bottom:0}
.sidebar-category-list small{color:#93c5fd;font-weight:800}
.article-prompt-cta .btn-hero-primary{display:inline-flex;margin-top:18px}
.article-prompt-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:1180px){.blog-category-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.blog-featured-grid,.blog-grid,.compact-blog-grid,.article-prompt-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.article-grid{grid-template-columns:1fr}.article-sidebar{position:static;max-height:none;overflow:visible;max-width:790px;width:100%;margin-inline:auto}.ad-skyscraper{min-height:280px}}
@media(max-width:760px){.blog-category-card-grid,.blog-featured-grid,.blog-grid,.compact-blog-grid,.article-prompt-grid{grid-template-columns:1fr}.blog-category-block{padding:20px}.envato-pagination a:first-child,.envato-pagination a:last-child{min-width:42px}.ad-leaderboard{min-height:100px;margin-bottom:28px}.article-after-section{margin-top:36px}.article-sidebar{max-width:100%}}

/* --- BLOG CLASSIC EDITORIAL LAYOUT --- */
.blog-editorial-hero{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;padding:88px 4% 18px;background:radial-gradient(circle at 50% 0,rgba(37,99,235,.18),transparent 34%),linear-gradient(to bottom,rgba(9,9,11,.98),rgba(9,9,11,1))}
.blog-editorial-hero h1.hero-title{font-size:clamp(2rem,3vw,2.8rem);line-height:1.08;margin:12px 0 12px;letter-spacing:0;font-weight:750}
.blog-editorial-hero .hero-subtitle{max-width:760px;font-size:1.05rem}
.blog-editorial-hero .blog-search.compact{width:min(600px,100%);min-height:58px;margin-top:16px;align-items:center;gap:8px;padding:8px 8px 8px 18px;border-radius:999px;background:rgba(15,15,20,.78);border:1px solid rgba(255,255,255,.12);box-shadow:0 10px 30px rgba(0,0,0,.22)}
.blog-editorial-hero .blog-search.compact .search-icon-input{position:static;display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;color:#cbd5e1;font-size:.95rem;transform:none;flex:none}
.blog-editorial-hero .blog-search.compact input{background:transparent;border:0;padding:0 8px;color:#fff;font-size:1rem}
.blog-editorial-hero .blog-search.compact input:focus{border-color:transparent}
.blog-editorial-hero .blog-search.compact .btn-search{min-width:92px;height:42px;padding:0 22px;border-radius:999px}
.blog-classic-shell{padding-top:8px}
.blog-classic-layout{display:grid;grid-template-columns:minmax(0,70fr) minmax(280px,30fr);gap:24px;align-items:start}
.blog-primary-column{min-width:0}
.blog-sidebar{position:sticky;top:88px;display:grid;gap:14px;min-width:0}
.blog-feature-large{overflow:hidden;border:1px solid rgba(255,255,255,.09);border-radius:14px;background:linear-gradient(145deg,rgba(24,24,32,.76),rgba(10,10,15,.92));box-shadow:var(--shadow-sm);margin-bottom:26px}
.blog-feature-large-media{display:flex;align-items:flex-end;aspect-ratio:1.8/1;padding:14px;background:linear-gradient(135deg,rgba(37,99,235,.42),rgba(6,182,212,.24));background-size:cover;background-position:center}
.blog-feature-large-media span{background:rgba(9,9,11,.82);border:1px solid rgba(255,255,255,.14);border-radius:999px;color:#bfdbfe;font-size:.78rem;font-weight:800;padding:7px 11px}
.blog-feature-large-body{display:grid;gap:12px;padding:clamp(18px,3vw,26px)}
.blog-feature-large-body h2{font-size:clamp(1.45rem,2.25vw,2.15rem);line-height:1.12;letter-spacing:0;max-width:720px}
.blog-feature-large-body p{color:#d4d4d8;font-size:.94rem;line-height:1.65;max-width:760px}
.blog-feature-large-body .btn-hero-primary{justify-self:start}
.blog-carousel-section{margin-bottom:28px}
.blog-carousel-controls{display:flex;gap:8px}
.blog-carousel-controls button{width:38px;height:38px;border:1px solid rgba(255,255,255,.1);border-radius:8px;background:rgba(255,255,255,.05);color:#fff;font-size:1.1rem;font-weight:800;cursor:pointer;transition:var(--transition)}
.blog-carousel-controls button:hover{background:var(--accent-gradient);border-color:transparent}
.blog-carousel{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 2px 14px;scroll-behavior:smooth}
.blog-carousel-item{position:relative;flex:0 0 220px;scroll-snap-align:start;display:grid;gap:8px;border:1px solid rgba(255,255,255,.09);border-radius:14px;background:rgba(18,18,24,.62);padding:10px;transition:var(--transition)}
.blog-carousel-item:hover{transform:translateY(-4px);border-color:rgba(96,165,250,.36)}
.blog-carousel-rank{position:absolute;top:20px;left:20px;z-index:2;border-radius:999px;background:rgba(37,99,235,.9);padding:5px 9px;color:#fff;font-size:.72rem;font-weight:900}
.blog-carousel-media{display:block;height:92px;border-radius:10px;background:linear-gradient(135deg,rgba(37,99,235,.42),rgba(6,182,212,.2));background-size:cover;background-position:center}
.blog-carousel-item strong{font-size:.92rem;line-height:1.28}
.blog-carousel-item small{color:var(--text-muted);font-size:.8rem}
.blog-recent-section{padding-inline:0}
.blog-two-column-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.classic-pagination a:first-child,.classic-pagination a:last-child{min-width:110px}
.blog-sidebar .sidebar-panel{background:linear-gradient(145deg,rgba(24,24,32,.72),rgba(10,10,15,.9));border:1px solid rgba(255,255,255,.09);border-radius:14px;padding:16px}
.article-sidebar .sidebar-panel{background:linear-gradient(145deg,rgba(24,24,32,.72),rgba(10,10,15,.9));border:1px solid rgba(255,255,255,.09);border-radius:14px;padding:16px}
.blog-sidebar .sidebar-panel h2,.article-sidebar .sidebar-panel h2{font-size:.92rem;text-transform:uppercase;letter-spacing:.1em;color:#a1a1aa;margin-bottom:14px}
.blog-sidebar-search{display:grid;gap:10px}
.blog-sidebar-search input{width:100%;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:8px;color:#fff;font:inherit;padding:10px 12px;outline:0}
.blog-sidebar-search input:focus{border-color:var(--border-focus)}
.blog-sidebar .ad-rectangle,.article-sidebar .ad-rectangle{min-height:250px}
.blog-sidebar .ad-skyscraper,.article-sidebar .ad-skyscraper{min-height:600px}
.article-related-search .blog-search{margin:0}
.related-search-results{margin-top:20px}
.article-end-ad{margin:42px auto 0}
@media(max-width:1080px){.blog-classic-layout{grid-template-columns:1fr}.blog-sidebar{position:static}.blog-two-column-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:720px){.blog-editorial-hero{padding:82px 4% 18px}.blog-two-column-grid{grid-template-columns:1fr}.blog-carousel-item{flex-basis:232px}.blog-classic-shell{padding-top:8px}.classic-pagination a:first-child,.classic-pagination a:last-child{min-width:42px}}

/* --- HOME ENHANCEMENTS --- */
.hero-stats{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin:-12px auto 26px;max-width:780px}
.hero-stats span{display:inline-flex;align-items:center;min-height:32px;padding:6px 11px;border:1px solid rgba(255,255,255,.1);border-radius:999px;background:rgba(15,15,20,.62);color:#e4e4e7;font-size:.78rem;font-weight:700}
.autocomplete-item{width:100%;border:0;background:transparent;color:inherit;text-align:left}
.home-tool-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.home-tool-card,.home-category-card{border:var(--glass-border);background:var(--bg-card);transition:var(--transition);box-shadow:var(--shadow-sm)}
.home-tool-card{display:grid;gap:8px;min-height:138px;padding:18px;border-radius:14px}
.home-tool-card:hover,.home-category-card:hover{transform:translateY(-4px);border-color:rgba(96,165,250,.42);box-shadow:0 18px 45px rgba(0,0,0,.32)}
.home-tool-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:rgba(37,99,235,.16);color:#93c5fd;font-size:.84rem;font-weight:800}
.home-tool-card strong{font-size:1rem}
.home-tool-card small,.home-category-card small{color:#60a5fa;font-weight:700}
.home-category-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.home-category-card{display:flex;gap:16px;min-height:174px;padding:22px;border-radius:16px}
.home-category-card h3{margin-bottom:8px;font-size:1.08rem}
.home-category-card p{color:var(--text-muted);font-size:.88rem;line-height:1.65;margin-bottom:12px}
.prompt-block{padding-top:8px;margin-bottom:54px}
.prompt-block:last-child{margin-bottom:0}
.card{height:430px}
.card-meta-line,.card-insights{display:flex;gap:8px;flex-wrap:wrap}
.card-meta-line{margin-bottom:8px}
.card-meta-line span,.card-insights span{border:1px solid rgba(255,255,255,.08);border-radius:999px;background:rgba(255,255,255,.035);color:#a1a1aa;font-size:.68rem;font-weight:700;padding:4px 8px}
.card-insights{margin:-4px 0 12px}
.card-actions{grid-template-columns:minmax(118px,1fr) minmax(108px,1fr)}
.card-actions .btn-card-copy{background:var(--accent-gradient);color:#fff}
.card-actions .btn-card-copy:hover{color:#fff;box-shadow:0 8px 24px rgba(37,99,235,.28)}
.home-articles-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.home-faq-section,.seo-section{border-top:1px solid var(--border-color);padding-top:56px}
.home-faq-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 28px}
.home-faq-list details{border-bottom:1px solid var(--border-color)}
.home-faq-list summary{display:flex;justify-content:space-between;gap:18px;padding:20px 0;cursor:pointer;list-style:none;font-weight:650}
.home-faq-list summary::-webkit-details-marker{display:none}
.home-faq-list summary span{color:#60a5fa;font-size:1.2rem;transition:transform .2s}
.home-faq-list details[open] summary span{transform:rotate(45deg)}
.home-faq-list p{padding:0 30px 20px 0;color:var(--text-muted);line-height:1.75}
.seo-copy{max-width:980px;margin:auto;padding:34px;border:1px solid rgba(255,255,255,.08);border-radius:18px;background:rgba(18,18,24,.38)}
.seo-copy h2{margin:8px 0 18px}
.seo-copy p{color:#d4d4d8;font-size:1rem;line-height:1.85}
.seo-copy p+p{margin-top:16px}
.footer{text-align:left}
.footer-grid{display:grid;grid-template-columns:minmax(240px,1.2fr) repeat(3,minmax(160px,1fr));gap:32px;width:min(1280px,100%);margin:0 auto 30px}
.footer-brand p{max-width:360px;color:var(--text-muted);font-size:.92rem;line-height:1.7;margin:12px 0 16px}
.footer h2{font-size:.86rem;text-transform:uppercase;letter-spacing:.12em;color:#e4e4e7;margin-bottom:14px}
.footer .footer-links{display:grid;justify-content:start;gap:10px;margin:0}
.footer-social{display:inline-flex;color:#93c5fd;font-weight:700;font-size:.9rem}
.footer-copyright{text-align:center}
@media(max-width:1100px){.home-tool-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.home-category-grid,.home-articles-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:760px){.hero-stats{gap:7px}.hero-stats span{font-size:.72rem}.home-tool-grid,.home-category-grid,.home-articles-grid,.home-faq-list{grid-template-columns:1fr}.home-tool-card{min-height:auto}.home-category-card{min-height:auto}.card{height:auto;min-height:430px}.section-header{align-items:flex-start;gap:12px;flex-direction:column}.footer-grid{grid-template-columns:1fr}.footer{text-align:left}.footer-copyright{text-align:left}}
@media(max-width:480px){.card-actions{grid-template-columns:1fr}.search-box-wrapper{border-radius:22px;align-items:stretch;flex-wrap:wrap;padding:10px}.search-input{flex:1 1 calc(100% - 36px)}.btn-search{width:100%}}

/* --- PREMIUM TOOL SHOWCASE --- */
.home-tool-section .section-header{width:100%;max-width:none}
.home-tool-section .section-header>div{width:100%}
.home-tool-section .section-subtitle{width:100%;max-width:none;line-height:1.7}
.home-tool-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
.home-tool-card{--tool-accent:#60a5fa;position:relative;isolation:isolate;display:flex;flex-direction:column;min-height:360px;padding:20px;border-radius:16px;overflow:hidden;background:linear-gradient(145deg,rgba(24,24,32,.76),rgba(10,10,15,.92));border:1px solid rgba(255,255,255,.09);box-shadow:var(--shadow-sm);cursor:pointer;transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease,background .22s ease}
.home-tool-card::before{content:attr(data-watermark);position:absolute;right:-8px;bottom:8px;z-index:-1;color:#fff;font:800 4.2rem var(--font-display);letter-spacing:0;opacity:.045;line-height:1;pointer-events:none}
.home-tool-card::after{content:"";position:absolute;inset:0;z-index:-2;background:radial-gradient(circle at 82% 12%,color-mix(in srgb,var(--tool-accent) 22%,transparent),transparent 42%);opacity:.55;pointer-events:none}
.home-tool-card:hover{transform:translateY(-6px);border-color:color-mix(in srgb,var(--tool-accent) 72%,rgba(255,255,255,.16));box-shadow:0 22px 54px rgba(0,0,0,.42),0 0 34px rgba(37,99,235,.16)}
.home-tool-logo{display:grid;place-items:center;width:58px;height:58px;margin-bottom:12px;border:1px solid color-mix(in srgb,var(--tool-accent) 42%,rgba(255,255,255,.08));border-radius:14px;background:rgba(255,255,255,.04);box-shadow:inset 0 1px rgba(255,255,255,.04);overflow:hidden}
.home-tool-logo img{display:block;width:46px;height:46px;object-fit:contain;border-radius:10px}
.home-tool-name{display:block;color:#fff;font:700 1.18rem var(--font-display);line-height:1.1;margin-bottom:12px}
.home-tool-label{display:block;color:#71717a;font-size:.72rem;font-weight:750;text-transform:uppercase;letter-spacing:.11em;margin-bottom:9px}
.home-tool-specialties{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:14px}
.home-tool-specialties span{display:inline-flex;align-items:center;min-height:26px;padding:5px 9px;border:1px solid color-mix(in srgb,var(--tool-accent) 22%,rgba(255,255,255,.08));border-radius:999px;background:rgba(255,255,255,.035);color:#d4d4d8;font-size:.72rem;font-weight:650}
.home-tool-description{display:block;color:var(--text-muted);font-size:.84rem;line-height:1.62;margin-bottom:16px}
.home-tool-count{display:block;margin-top:auto;color:#cbd5e1;font-size:.78rem;font-weight:700}
.home-tool-action{display:inline-flex;align-items:center;justify-content:center;align-self:flex-start;min-height:36px;margin-top:16px;padding:8px 13px;border:1px solid color-mix(in srgb,var(--tool-accent) 36%,rgba(255,255,255,.08));border-radius:8px;background:rgba(37,99,235,.1);color:#bfdbfe;font-size:.8rem;font-weight:800;transition:background .2s ease,color .2s ease,border-color .2s ease,transform .2s ease}
.home-tool-card:hover .home-tool-action{background:var(--accent-gradient);border-color:transparent;color:#fff;transform:translateX(2px)}
.tool-chatgpt{--tool-accent:#6ee7b7}.tool-gemini{--tool-accent:#60a5fa}.tool-claude{--tool-accent:#f59e0b}.tool-googleflow{--tool-accent:#38bdf8}.tool-midjourney{--tool-accent:#a78bfa}.tool-flux{--tool-accent:#2dd4bf}.tool-cursor{--tool-accent:#94a3b8}.tool-codex{--tool-accent:#93c5fd}.tool-leonardo{--tool-accent:#fb923c}.tool-ideogram{--tool-accent:#7dd3fc}
@media(max-width:1100px){.home-tool-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.home-tool-card{min-height:340px}}
@media(max-width:760px){.home-tool-grid{grid-template-columns:1fr}.home-tool-card{width:min(100%,520px);min-height:auto;margin-inline:auto}.home-tool-card::before{font-size:3.6rem}}

/* --- HOME FAQ --- */
.home-faq-section{border-top:1px solid var(--border-color);padding-top:64px}
.home-faq-section .section-header{justify-content:center;text-align:center;margin-bottom:28px}
.home-faq-section .section-header>div{width:min(1000px,100%);margin-inline:auto}
.home-faq-section .section-subtitle{max-width:none}
.home-faq-list{display:grid;grid-template-columns:1fr;gap:12px;width:min(1000px,100%);margin-inline:auto}
.home-faq-list details{border:1px solid rgba(255,255,255,.08);border-radius:14px;background:#111217;box-shadow:var(--shadow-sm);overflow:hidden;transition:border-color .22s ease,background .22s ease,box-shadow .22s ease}
.home-faq-list details:hover{border-color:rgba(96,165,250,.24);background:#13141b}
.home-faq-list details[open]{border-color:rgba(96,165,250,.42);box-shadow:0 16px 42px rgba(0,0,0,.28),0 0 28px rgba(37,99,235,.08)}
.home-faq-list summary{display:flex;align-items:center;justify-content:space-between;gap:18px;width:100%;padding:22px 24px;cursor:pointer;list-style:none;color:#f4f4f5;font-weight:750;font-size:1rem;line-height:1.35}
.home-faq-list summary::-webkit-details-marker{display:none}
.faq-toggle-icon{display:grid;place-items:center;flex:0 0 30px;width:30px;height:30px;border:1px solid rgba(96,165,250,.22);border-radius:50%;background:rgba(37,99,235,.08);color:#93c5fd;font-size:1.2rem;font-weight:700;line-height:1;transition:background .2s ease,color .2s ease,border-color .2s ease,transform .2s ease}
.faq-toggle-icon::before{content:"+"}
.home-faq-list details[open] .faq-toggle-icon{border-color:rgba(96,165,250,.42);background:rgba(37,99,235,.18);color:#fff;transform:rotate(180deg)}
.home-faq-list details[open] .faq-toggle-icon::before{content:"−"}
.home-faq-list p{margin:0;padding:0 24px 24px;color:#a1a1aa;font-size:.95rem;line-height:1.75}
@media(max-width:760px){.home-faq-section{padding-top:52px}.home-faq-section .section-header{text-align:left}.home-faq-list{gap:10px}.home-faq-list summary{padding:18px 16px;font-size:.95rem}.home-faq-list p{padding:0 16px 18px;font-size:.9rem}.faq-toggle-icon{flex-basis:28px;width:28px;height:28px}}

/* --- PREMIUM CATEGORY SHOWCASE --- */
.home-category-section .section-header{width:100%;max-width:none}
.home-category-section .section-header>div{width:100%}
.home-category-section .section-subtitle{max-width:none;line-height:1.7}
.popular-category-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:4px 0 22px;padding:10px;border:1px solid rgba(255,255,255,.08);border-radius:14px;background:rgba(15,15,20,.54)}
.popular-category-bar span{color:#71717a;font-size:.72rem;font-weight:800;letter-spacing:.11em;text-transform:uppercase;margin-right:4px}
.popular-category-bar a{display:inline-flex;align-items:center;min-height:32px;padding:7px 12px;border:1px solid rgba(255,255,255,.08);border-radius:999px;background:rgba(255,255,255,.04);color:#d4d4d8;font-size:.8rem;font-weight:700;transition:var(--transition)}
.popular-category-bar a:hover{border-color:rgba(96,165,250,.45);background:rgba(37,99,235,.16);color:#fff;transform:translateY(-1px)}
.home-category-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.home-category-card{--cat-accent:#60a5fa;position:relative;isolation:isolate;display:flex;flex-direction:column;min-height:390px;padding:24px;border-radius:18px;overflow:hidden;background:linear-gradient(145deg,rgba(24,24,32,.76),rgba(10,10,15,.92));border:1px solid rgba(255,255,255,.09);box-shadow:var(--shadow-sm);animation:categoryFadeIn .18s ease both;animation-delay:var(--delay);transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease}
.home-category-card::before{content:attr(data-watermark);position:absolute;right:-10px;bottom:8px;z-index:-1;color:#fff;font:800 4.6rem var(--font-display);letter-spacing:0;opacity:.04;line-height:1;transition:transform .22s ease,opacity .22s ease}
.home-category-card::after{content:"";position:absolute;inset:0;z-index:-2;background:radial-gradient(circle at 82% 12%,color-mix(in srgb,var(--cat-accent) 22%,transparent),transparent 42%);opacity:.45;transition:transform .22s ease,opacity .22s ease}
.home-category-card:hover{transform:translateY(-8px);border-color:color-mix(in srgb,var(--cat-accent) 72%,rgba(255,255,255,.16));box-shadow:0 24px 58px rgba(0,0,0,.44),0 0 34px rgba(37,99,235,.15)}
.home-category-card:hover::before,.home-category-card:hover::after{transform:scale(1.04);opacity:.06}
.category-card-badge{position:absolute;top:18px;right:18px;z-index:2;padding:5px 9px;border:1px solid color-mix(in srgb,var(--cat-accent) 34%,rgba(255,255,255,.08));border-radius:999px;background:rgba(9,9,11,.58);color:#dbeafe;font-size:.64rem;font-weight:850;letter-spacing:.1em;text-transform:uppercase}
.category-card-icon{width:58px;height:58px;margin-bottom:18px;border:1px solid color-mix(in srgb,var(--cat-accent) 42%,rgba(255,255,255,.08));background:rgba(255,255,255,.04);color:#fff;font-size:1.65rem;transition:transform .22s ease,background .22s ease}
.home-category-card:hover .category-card-icon{transform:scale(1.08);background:color-mix(in srgb,var(--cat-accent) 16%,rgba(255,255,255,.04))}
.category-card-body{display:flex;flex-direction:column;gap:12px;flex:1}
.category-card-title{color:#fff;font:700 1.25rem var(--font-display);line-height:1.1}
.category-card-description{color:#d4d4d8;font-size:.92rem;line-height:1.6}
.category-card-examples{display:flex;gap:7px;flex-wrap:wrap;margin-top:2px}
.category-card-examples strong{flex:0 0 100%;color:#71717a;font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.1em}
.category-card-examples span{display:inline-flex;align-items:center;min-height:26px;padding:5px 9px;border:1px solid color-mix(in srgb,var(--cat-accent) 20%,rgba(255,255,255,.08));border-radius:999px;background:rgba(255,255,255,.035);color:#d4d4d8;font-size:.72rem;font-weight:650}
.category-card-stats{display:grid;grid-template-columns:1fr;gap:7px;margin-top:auto;padding-top:14px;border-top:1px solid rgba(255,255,255,.06)}
.category-card-stats span{color:#cbd5e1;font-size:.78rem;font-weight:750}
.category-card-action{display:inline-flex;align-items:center;justify-content:center;align-self:flex-start;min-height:38px;margin-top:2px;padding:9px 14px;border:1px solid color-mix(in srgb,var(--cat-accent) 36%,rgba(255,255,255,.08));border-radius:8px;background:rgba(37,99,235,.1);color:#bfdbfe;font-size:.8rem;font-weight:850;transition:background .2s ease,color .2s ease,border-color .2s ease,transform .2s ease}
.home-category-card:hover .category-card-action{background:var(--accent-gradient);border-color:transparent;color:#fff;transform:translateX(2px)}
.category-imagens{--cat-accent:#60a5fa}.category-programacao{--cat-accent:#a78bfa}.category-marketing{--cat-accent:#fb923c}.category-negocios{--cat-accent:#2dd4bf}.category-estudos{--cat-accent:#6ee7b7}.category-financas{--cat-accent:#facc15}.category-produtividade{--cat-accent:#22d3ee}.category-redes{--cat-accent:#f472b6}.category-vendas{--cat-accent:#22c55e}
.category-section-cta{display:grid;place-items:center;gap:14px;margin:32px auto 0;padding:30px 20px;border:1px solid rgba(255,255,255,.08);border-radius:18px;background:rgba(15,15,20,.42);text-align:center}
.category-section-cta p{color:#d4d4d8;font-size:1rem;font-weight:700}
.category-section-cta .btn-hero-primary{display:inline-flex}
@keyframes categoryFadeIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:1100px){.home-category-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.home-category-card{min-height:370px}}
@media(max-width:760px){.popular-category-bar{align-items:flex-start}.popular-category-bar span{flex:0 0 100%}.home-category-grid{grid-template-columns:1fr}.home-category-card{width:min(100%,560px);min-height:auto;margin-inline:auto}.home-category-card::before{font-size:3.7rem}.category-card-stats{grid-template-columns:1fr}.category-section-cta .btn-hero-primary{width:100%;justify-content:center;text-align:center}}

/* --- PROMPT CARD IMAGE FOCUS --- */
.card{
  height:auto;
  min-height:540px;
}

.card-image-area{
  position:relative;
  flex:0 0 220px;
  width:100%;
  height:220px;
  border-radius:16px 16px 0 0;
  overflow:hidden;
  background-size:cover!important;
  background-position:center!important;
  transition:transform .3s ease,filter .3s ease;
  will-change:transform,filter;
}

.card-image-area::after{
  content:"";
  position:absolute;
  right:0;
  bottom:0;
  left:0;
  height:56%;
  background:linear-gradient(to top,rgba(4,6,14,.72),rgba(4,6,14,0));
  pointer-events:none;
}

.card:hover .card-image-area{
  transform:scale(1.03);
  filter:brightness(1.08);
}

.card-badges{
  z-index:2;
}

.card-badges .badge{
  background:rgba(9,9,11,.68);
  border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(8px);
}

.card-badges .badge-tool{
  background:rgba(37,99,235,.72);
  color:#fff;
}

.card-content{
  min-height:0;
  padding:18px 20px 20px;
}

.card-title{
  margin-bottom:7px;
}

.card-desc{
  margin-bottom:12px;
  -webkit-line-clamp:2;
  height:auto;
  min-height:2.4rem;
}

.card-insights{
  margin:0 0 12px;
}

.card-footer{
  margin-top:auto;
}

.card-actions{
  width:100%;
}

@media(max-width:1100px){
  .card{
    min-height:510px;
  }

  .card-image-area{
    flex-basis:190px;
    height:190px;
  }
}

/* Prompt card footer: keep metrics centered and the single action full-width. */
.card .card-footer {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  align-items: stretch !important;
  width: 100% !important;
}

.card .card-metrics {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
}

.card .card-actions.card-actions-single {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  justify-content: stretch !important;
  width: 100% !important;
}

.card .card-actions.card-actions-single .btn-card-more {
  display: flex !important;
  justify-content: center !important;
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box !important;
}

@media(max-width:760px){
  .card{
    height:auto;
    min-height:0;
  }

  .card-image-area{
    flex-basis:180px;
    height:180px;
  }
}

/* --- FULL WIDTH HOME INFO SECTIONS --- */
.home-faq-section .section-header{
  width:100%;
}

.home-faq-section .section-header>div,
.home-faq-list,
.seo-copy{
  width:100%;
  max-width:none;
}

.home-content>.ad-banner{
  width:calc(100% - 8%);
  margin:32px auto;
}

.home-faq-section,
.seo-section{
  border-top:0;
}

.home-faq-section::before,
.seo-section::before{
  content:"";
  position:absolute;
  top:0;
  left:4%;
  right:4%;
  height:1px;
  background:var(--border-color);
}

.seo-copy p{
  text-align:justify;
}

/* --- FOOTER SOCIALS --- */
.footer-socials{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin-top:18px;
}

.footer-social{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:40px;
  padding:8px 12px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:10px;
  background:rgba(255,255,255,.045);
  color:#e4e4e7;
  font-size:.84rem;
  font-weight:750;
  transition:transform .22s ease,border-color .22s ease,background .22s ease,color .22s ease;
}

.footer-social img{
  display:block;
  width:24px;
  height:24px;
  border-radius:7px;
  object-fit:cover;
}

.footer-social:hover{
  transform:translateY(-2px);
  border-color:rgba(96,165,250,.38);
  background:rgba(37,99,235,.12);
  color:#fff;
}

@media(max-width:480px){
  .footer-socials{
    align-items:stretch;
  }

  .footer-social{
    flex:1 1 100%;
    justify-content:flex-start;
  }
}

/* --- PREMIUM FOOTER --- */
.footer{
  background:linear-gradient(180deg,#07070a 0%,#050508 100%);
  border-top:1px solid rgba(255,255,255,.08);
  padding:58px 4% 28px;
  text-align:left;
}

.footer-grid{
  display:grid;
  grid-template-columns:minmax(260px,1.25fr) repeat(3,minmax(150px,1fr));
  gap:38px;
  width:min(1280px,100%);
  margin:0 auto 34px;
}

.footer-brand{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}

.footer-logo{
  display:inline-flex;
  color:#fff;
  font-family:var(--font-display);
  font-size:1.65rem;
  font-weight:850;
  letter-spacing:0;
  line-height:1;
  margin-bottom:14px;
}

.footer-brand p{
  max-width:390px;
  color:var(--text-muted);
  font-size:.93rem;
  line-height:1.75;
  margin:0;
}

.footer-tagline{
  display:block;
  color:#fff;
  font-size:.95rem;
  line-height:1.45;
  margin-top:14px;
}

.footer-brand .footer-cta-text{
  margin-top:8px;
}

.footer-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:36px;
  margin-top:14px;
  padding:8px 13px;
  border:1px solid rgba(96,165,250,.28);
  border-radius:9px;
  background:rgba(37,99,235,.12);
  color:#bfdbfe;
  font-size:.82rem;
  font-weight:850;
  transition:transform .25s ease,border-color .25s ease,background .25s ease,color .25s ease,box-shadow .25s ease;
}

.footer-cta:hover{
  transform:translateY(-2px);
  border-color:rgba(96,165,250,.58);
  background:rgba(37,99,235,.2);
  color:#fff;
  box-shadow:0 12px 30px rgba(37,99,235,.12);
}

.footer h2{
  color:#f4f4f5;
  font-size:.82rem;
  font-weight:850;
  letter-spacing:.12em;
  margin:2px 0 16px;
  text-transform:uppercase;
}

.footer .footer-links{
  display:grid;
  gap:10px;
  justify-content:start;
  list-style:none;
  margin:0;
  padding:0;
}

.footer-links a{
  display:inline-flex;
  color:#a1a1aa;
  font-size:.9rem;
  line-height:1.35;
  transition:color .25s ease,transform .25s ease;
}

.footer-links a:hover{
  color:#60a5fa;
  transform:translateX(4px);
}

.footer-socials{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin-top:18px;
}

.footer-social{
  position:relative;
  display:grid;
  place-items:center;
  flex:0 0 42px;
  width:42px;
  height:42px;
  min-height:42px;
  padding:0;
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  background:#111217;
  color:#e4e4e7;
  transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease,background .25s ease;
}

.footer-social img{
  display:block;
  width:22px;
  height:22px;
  border-radius:6px;
  object-fit:cover;
  transition:transform .25s ease,filter .25s ease;
}

.footer-social:hover{
  transform:translateY(-3px);
  border-color:rgba(96,165,250,.48);
  background:#131620;
  box-shadow:0 0 0 1px rgba(96,165,250,.14),0 0 24px rgba(37,99,235,.24);
}

.footer-social:hover img{
  transform:scale(1.12);
  filter:brightness(1.08);
}

.footer-copyright{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  width:min(1280px,100%);
  margin:0 auto;
  padding-top:22px;
  border-top:1px solid rgba(255,255,255,.06);
  color:rgba(255,255,255,.38);
  font-size:.8rem;
  text-align:left;
}

.footer-copyright p{
  margin:0;
}

@media(max-width:1100px){
  .footer-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media(max-width:760px){
  .footer{
    text-align:center;
  }

  .footer-grid{
    grid-template-columns:1fr;
    gap:30px;
  }

  .footer-brand{
    align-items:center;
  }

  .footer-brand p{
    max-width:560px;
  }

  .footer .footer-links{
    justify-content:center;
  }

  .footer-links a:hover{
    transform:translateY(-1px);
  }

  .footer-socials{
    justify-content:center;
  }

  .footer-social{
    flex:0 0 42px;
    justify-content:center;
  }

  .footer-copyright{
    flex-direction:column;
    justify-content:center;
    text-align:center;
  }
}