/* ================================================================
   EARNWAY — Premium Design System v6.0
   Gen section: pixel-matched to AIMug reference layout
   ================================================================ */

/* ────────────────────────────────────────────────────────────────
   §1  DESIGN TOKENS
   ──────────────────────────────────────────────────────────────── */
:root {
  --teal:         #0dcfb8;
  --teal2:        #09a896;
  --teal-pale:    rgba(13,207,184,.10);
  --teal-pale2:   rgba(13,207,184,.05);
  --teal-glow:    rgba(13,207,184,.22);
  --teal-border:  rgba(13,207,184,.22);

  --amber:        #f59e0b;
  --amber2:       #d97706;
  --amber-pale:   rgba(245,158,11,.10);
  --amber-pale2:  rgba(245,158,11,.05);
  --amber-glow:   rgba(245,158,11,.20);
  --amber-border: rgba(245,158,11,.22);

  --indigo:       #818cf8;
  --indigo2:      #6366f1;
  --indigo-pale:  rgba(129,140,248,.10);
  --indigo-pale2: rgba(129,140,248,.05);
  --indigo-glow:  rgba(129,140,248,.20);
  --indigo-border:rgba(129,140,248,.22);

  --sage:         #34d399;
  --sage-pale:    rgba(52,211,153,.10);
  --sage-glow:    rgba(52,211,153,.18);
  --sage-border:  rgba(52,211,153,.22);

  --icon-r: 14px;
}

/* ────────────────────────────────────────────────────────────────
   §2  LOGO — dual theme
   ──────────────────────────────────────────────────────────────── */
.nav-logo .logo-dark,
.footer-brand .logo-dark        { display: none; }
.nav-logo .logo-light,
.footer-brand .logo-light       { display: block; }
[data-theme="light"] .nav-logo .logo-light,
[data-theme="light"] .footer-brand .logo-light { display: none; }
[data-theme="light"] .nav-logo .logo-dark,
[data-theme="light"] .footer-brand .logo-dark  { display: block; }
[data-theme="light"] #page-loader .ld-logo { filter: brightness(0) saturate(0); }
#page-loader .ld-bar { background: linear-gradient(90deg, var(--accent), var(--teal)); }

/* ────────────────────────────────────────────────────────────────
   §3  GLOBAL PALETTE TOUCHES
   ──────────────────────────────────────────────────────────────── */
::-webkit-scrollbar-thumb { background: rgba(13,207,184,.22); }
::-webkit-scrollbar-thumb:hover { background: var(--teal); }

.nav-links a.active { color: var(--teal); background: var(--teal-pale); }
.nav-cta { background: linear-gradient(135deg, var(--accent), #a81040); }

.hero-card:nth-child(1) { background:rgba(226,40,97,.13); border-color:rgba(226,40,97,.26); }
.hero-card:nth-child(2) { background:rgba(13,207,184,.12); border-color:rgba(13,207,184,.26); }
.hero-card:nth-child(3) { background:rgba(245,158,11,.11); border-color:rgba(245,158,11,.24); }

.stat-item:nth-child(1) .stat-num em { color: var(--accent); }
.stat-item:nth-child(2) .stat-num em { color: var(--teal); }
.stat-item:nth-child(3) .stat-num em { color: var(--amber); }
.stat-item:nth-child(4) .stat-num em { color: var(--indigo); }

/* ────────────────────────────────────────────────────────────────
   §4  ICON SYSTEM — consistent sizing
   ──────────────────────────────────────────────────────────────── */
.feat-icon, .uc-icon {
  width: 50px !important; height: 50px !important;
  border-radius: var(--icon-r) !important;
  display: flex !important; align-items: center !important;
  justify-content: center !important; flex-shrink: 0;
  font-size: 0 !important;
  transition: transform .3s, box-shadow .3s;
}
.feat-icon svg, .uc-icon svg { width: 22px !important; height: 22px !important; flex-shrink: 0; }
.card:hover .feat-icon  { transform: translateY(-2px); }
.uc-card:hover .uc-icon { transform: scale(1.07); }

.feat-grid .card:nth-child(1) .feat-icon { background:rgba(226,40,97,.12); box-shadow:0 4px 16px rgba(226,40,97,.18); color:var(--accent); }
.feat-grid .card:nth-child(2) .feat-icon { background:rgba(255,255,255,.18)!important; color:#fff!important; }
.feat-grid .card:nth-child(3) .feat-icon { background:var(--teal-pale);   box-shadow:0 4px 16px var(--teal-glow);   color:var(--teal); }
.feat-grid .card:nth-child(4) .feat-icon { background:var(--amber-pale);  box-shadow:0 4px 16px var(--amber-glow);  color:var(--amber); }
.feat-grid .card:nth-child(5) .feat-icon { background:var(--indigo-pale); box-shadow:0 4px 16px var(--indigo-glow); color:var(--indigo); }
.feat-grid .card:nth-child(6) .feat-icon { background:var(--sage-pale);   box-shadow:0 4px 16px var(--sage-glow);   color:var(--sage); }

.uc-card:nth-child(8n+1) .uc-icon { background:rgba(226,40,97,.12); box-shadow:0 4px 12px rgba(226,40,97,.18); color:var(--accent); }
.uc-card:nth-child(8n+2) .uc-icon { background:var(--teal-pale);   box-shadow:0 4px 12px var(--teal-glow);   color:var(--teal); }
.uc-card:nth-child(8n+3) .uc-icon { background:var(--amber-pale);  box-shadow:0 4px 12px var(--amber-glow);  color:var(--amber); }
.uc-card:nth-child(8n+4) .uc-icon { background:var(--indigo-pale); box-shadow:0 4px 12px var(--indigo-glow); color:var(--indigo); }
.uc-card:nth-child(8n+5) .uc-icon { background:var(--sage-pale);   box-shadow:0 4px 12px var(--sage-glow);   color:var(--sage); }
.uc-card:nth-child(8n+6) .uc-icon { background:var(--amber-pale);  box-shadow:0 4px 12px var(--amber-glow);  color:var(--amber); }
.uc-card:nth-child(8n+7) .uc-icon { background:var(--teal-pale);   box-shadow:0 4px 12px var(--teal-glow);   color:var(--teal); }
.uc-card:nth-child(8n+8) .uc-icon { background:rgba(226,40,97,.12);box-shadow:0 4px 12px rgba(226,40,97,.18);color:var(--accent); }

.card:nth-child(1) .step-num { background:linear-gradient(135deg,var(--accent),#9f1939); box-shadow:0 8px 24px rgba(226,40,97,.28); }
.card:nth-child(2) .step-num { background:linear-gradient(135deg,var(--teal),var(--teal2)); box-shadow:0 8px 24px var(--teal-glow); }
.card:nth-child(3) .step-num { background:linear-gradient(135deg,var(--amber),var(--amber2)); box-shadow:0 8px 24px var(--amber-glow); }

/* Blog, FAQ, Pricing coloured accents */
.blog-card:nth-child(1) .blog-cat { color:var(--accent); }
.blog-card:nth-child(2) .blog-cat { color:var(--teal); }
.blog-card:nth-child(3) .blog-cat { color:var(--amber); }
.blog-card:nth-child(4) .blog-cat { color:var(--indigo); }
.blog-card:nth-child(5) .blog-cat { color:var(--sage); }
.faq-item.open { border-color: var(--teal-border); }
.faq-item.open .faq-icon { background:var(--teal); box-shadow:0 4px 16px var(--teal-glow); }
.pricing-card.featured::after { background:linear-gradient(90deg,transparent,var(--teal),transparent); }
.footer-col a:hover { color:var(--teal)!important; }
.footer-social a:nth-child(2):hover { background:var(--teal); border-color:var(--teal); }

/* ────────────────────────────────────────────────────────────────
   §5  GENERATIVE SECTION — AIMug reference layout
   Left: browser card + image mosaic  |  Right: clean content
   ──────────────────────────────────────────────────────────────── */

.gen-section {
  padding: 96px 0;
  background: var(--bg);
  position: relative;
  overflow: visible;           /* allow mosaic to breathe */
}

/* subtle ambient orbs */
.gen-section::before {
  content:''; position:absolute; top:-5%; right:-3%; width:420px; height:420px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(13,207,184,.08) 0%,transparent 68%);
  filter:blur(80px); pointer-events:none; z-index:0;
  animation:genOrbA 9s ease-in-out infinite alternate;
}
.gen-section::after {
  content:''; position:absolute; bottom:-5%; left:-3%; width:360px; height:360px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(226,40,97,.07) 0%,transparent 68%);
  filter:blur(80px); pointer-events:none; z-index:0;
  animation:genOrbB 11s ease-in-out infinite alternate;
}
@keyframes genOrbA { from{transform:translate(0,0)} to{transform:translate(-16px,14px)} }
@keyframes genOrbB { from{transform:translate(0,0)} to{transform:translate(14px,-16px)} }

/* Two-column layout — image left, content right */
.gen-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
  position: relative; z-index: 1;
}
@media(max-width:1024px) { .gen-layout { gap: 48px; } }
@media(max-width:900px)  { .gen-layout { grid-template-columns: 1fr; gap: 44px; } }

/* ═══ LEFT: Browser card ═══ */
.gen-browser-card {
  background: var(--bg3);
  border: 1.5px solid var(--border2);
  border-radius: 22px;
  overflow: hidden;
  box-shadow:
    0 32px 80px rgba(0,0,0,.40),
    0 8px 24px rgba(0,0,0,.24),
    inset 0 1px 0 rgba(255,255,255,.06);
  transition: transform .4s ease, box-shadow .4s ease;
  position: relative;
}
.gen-browser-card:hover {
  transform: translateY(-6px);
  box-shadow:
    0 48px 100px rgba(0,0,0,.48),
    0 12px 32px rgba(0,0,0,.30),
    inset 0 1px 0 rgba(255,255,255,.08);
}

/* Mac-style dot bar — exactly like the reference */
.gen-dots-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 13px 16px 11px;
  background: rgba(255,255,255,.03);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.gen-dot {
  width: 13px; height: 13px;
  border-radius: 50%;
  flex-shrink: 0;
}
.gen-dot-r { background: #ff5f57; }
.gen-dot-y { background: #febc2e; }
.gen-dot-g { background: #28c840; }

/* Image mosaic container */
.gen-mosaic-wrap { padding: 12px; }

/* ★ THE EXACT GRID matching the AIMug screenshot
   4 columns, 4 rows. Tile 1 tall (rows 1-2), tile 3 wide (cols 3-4),
   tile 9 wide (cols 3-4), tile 11 wide (cols 2-4) */
.gen-mosaic {
  display: grid;
  grid-template-columns: 0.72fr 1fr 1fr 1fr;
  grid-template-rows: 118px 118px 118px 108px;
  gap: 7px;
  border-radius: 12px;
  overflow: hidden;
}

/* Individual tile base */
.gen-tile {
  position: relative;
  overflow: hidden;
  background: var(--bg4);
  border-radius: 8px;
  cursor: pointer;
}
.gen-tile img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform .5s ease, filter .4s ease;
  filter: brightness(.92) saturate(1.12);
}
.gen-tile:hover img {
  transform: scale(1.08);
  filter: brightness(1.02) saturate(1.3);
}
/* Hover label */
.gen-tile::after {
  content: attr(data-label);
  position: absolute; bottom:0; left:0; right:0;
  padding: 26px 8px 7px;
  background: linear-gradient(to top, rgba(6,2,14,.82), transparent);
  font-size: 9.5px; font-weight: 700;
  color: rgba(255,255,255,.92);
  letter-spacing: .09em; text-transform: uppercase;
  opacity: 0; transition: opacity .3s;
}
.gen-tile:hover::after { opacity: 1; }

/* ★ Grid placements — exactly matching reference */
/* Tile 1: left tall (rows 1-2) */
.gen-tile:nth-child(1)  { grid-column: 1;   grid-row: 1 / 3; }
/* Tile 2: top-center */
.gen-tile:nth-child(2)  { grid-column: 2;   grid-row: 1; }
/* Tile 3: top-right WIDE (2 cols) */
.gen-tile:nth-child(3)  { grid-column: 3/5; grid-row: 1; }
/* Tile 4: mid-center */
.gen-tile:nth-child(4)  { grid-column: 2;   grid-row: 2; }
/* Tile 5: mid-right col3 */
.gen-tile:nth-child(5)  { grid-column: 3;   grid-row: 2; }
/* Tile 6: mid-right col4 */
.gen-tile:nth-child(6)  { grid-column: 4;   grid-row: 2; }
/* Tile 7: bottom-left (row 3) */
.gen-tile:nth-child(7)  { grid-column: 1;   grid-row: 3; }
/* Tile 8: bottom-center (row 3) */
.gen-tile:nth-child(8)  { grid-column: 2;   grid-row: 3; }
/* Tile 9: bottom-right WIDE (row 3, 2 cols) */
.gen-tile:nth-child(9)  { grid-column: 3/5; grid-row: 3; }
/* Tile 10: last-row col 2 */
.gen-tile:nth-child(10) { grid-column: 2;   grid-row: 4; }
/* Tile 11: last-row WIDE (cols 3-4) */
.gen-tile:nth-child(11) { grid-column: 3/5; grid-row: 4; }

/* Shimmer on tile 5 (mid-right) */
.gen-tile-shimmer {
  position: absolute; inset: 0; z-index: 3;
  background: rgba(20,10,32,.85);
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 8px; padding: 14px;
  opacity: 0; pointer-events: none; transition: opacity .4s;
  border-radius: 6px;
}
.gen-tile-shimmer.active { opacity: 1; }
.gsb {
  height: 5px; width: 80%; border-radius: 6px;
  background: linear-gradient(90deg, var(--border) 25%, rgba(13,207,184,.25) 50%, var(--border) 75%);
  background-size: 200% 100%;
  animation: gsbSlide 1.4s linear infinite;
}
@keyframes gsbSlide { from{background-position:200% 0} to{background-position:-200% 0} }
.gsb-lbl {
  font-size: 10px; font-weight: 700; color: var(--muted);
  letter-spacing: .10em; text-transform: uppercase;
  animation: gsbPulse 1.4s ease-in-out infinite;
}
@keyframes gsbPulse { 0%,100%{opacity:.4} 50%{opacity:1} }

/* ═══ RIGHT: Content ═══ */
.gen-right { }

/* Eyebrow — orange like the reference */
.gen-eyebrow-label {
  display: inline-block;
  font-family: var(--font-b);
  font-size: 13px; font-weight: 700;
  color: var(--amber);
  letter-spacing: .04em;
  margin-bottom: 14px;
}

/* Heading */
.gen-heading {
  font-family: var(--font-d);
  font-size: clamp(28px, 3.6vw, 50px);
  font-weight: 700; line-height: 1.12;
  color: var(--text);
  margin-bottom: 18px;
}

/* Description */
.gen-desc {
  font-size: clamp(14px, 1.4vw, 16px);
  color: var(--muted);
  line-height: 1.75;
  margin-bottom: 26px;
  max-width: 480px;
}
.gen-desc strong { color: var(--teal); font-weight: 700; }

/* Checklist — 2-column, simple checkmarks like the reference */
.gen-checklist {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 24px;
  margin-bottom: 32px;
}
@media(max-width:480px) { .gen-checklist { grid-template-columns: 1fr; } }

.gen-check-row {
  display: flex; align-items: center; gap: 10px;
  font-size: 14px; font-weight: 600; color: var(--text);
}
.gen-check-mark {
  width: 20px; height: 20px;
  color: var(--teal);
  flex-shrink: 0;
}
.gen-check-mark svg { width: 20px; height: 20px; }

/* Optional prompt input — minimal, sits just above button */
.gen-prompt-row {
  display: flex; gap: 0;
  background: var(--bg3);
  border: 1.5px solid var(--border2);
  border-radius: var(--pill);
  overflow: hidden;
  margin-bottom: 14px;
  transition: border-color .3s, box-shadow .3s;
}
.gen-prompt-row:focus-within {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(13,207,184,.09);
}
.gen-prompt-input {
  flex: 1; background: transparent; border: none; outline: none;
  padding: 13px 18px;
  font-size: 14px; color: var(--text); font-family: var(--font-b);
}
.gen-prompt-input::placeholder { color: var(--muted2); font-style: italic; }

/* ★ Button — indigo/blue like the reference screenshot */
.gen-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 15px 32px;
  width: 100%;
  font-size: 15px; font-weight: 700;
  font-family: var(--font-b);
  border-radius: var(--pill);
  border: none; cursor: pointer;
  background: linear-gradient(135deg, #5b6cf9 0%, #4355e8 100%);
  color: #fff;
  box-shadow: 0 8px 28px rgba(91,108,249,.32), 0 2px 8px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.15);
  text-decoration: none;
  transition: var(--t);
  position: relative; overflow: hidden;
  letter-spacing: .02em;
}
.gen-btn::before {
  content:''; position:absolute; inset:0; border-radius:inherit;
  background:linear-gradient(180deg,rgba(255,255,255,.18) 0%,transparent 55%);
  opacity:0; transition:opacity .3s;
}
.gen-btn:hover::before { opacity:1; }
.gen-btn:hover {
  transform: translateY(-3px) scale(1.01);
  box-shadow: 0 14px 40px rgba(91,108,249,.42), 0 4px 16px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.18);
  color: #fff;
}
.gen-btn svg { width: 17px; height: 17px; }

/* ────────────────────────────────────────────────────────────────
   §6  COLLAB SECTION — bright, named logos
   ──────────────────────────────────────────────────────────────── */
.collab-section { background: #13102a !important; }
[data-theme="light"] .collab-section { background: #eeedfb !important; }

.collab-heading span {
  background: linear-gradient(135deg, var(--teal), var(--accent));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.collab-stat:nth-child(1) .collab-stat-num { background:linear-gradient(135deg,var(--text),var(--accent)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.collab-stat:nth-child(2) .collab-stat-num { background:linear-gradient(135deg,var(--text),var(--teal));   -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.collab-stat:nth-child(3) .collab-stat-num { background:linear-gradient(135deg,var(--text),var(--amber));  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }

.collab-strip-wrap {
  background: rgba(255,255,255,.04) !important;
  border: 1.5px solid rgba(255,255,255,.10) !important;
}

/* Logo items: bright white logos on dark bg, with coloured name tags */
.collab-logo-item {
  opacity: 1 !important;
  padding: 10px 22px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  border-right: none !important;
  transition: transform .3s ease !important;
  flex-shrink: 0;
}
.collab-logo-item:hover { transform: translateY(-3px) scale(1.08) !important; }

.collab-logo-item img {
  height: 30px !important;
  object-fit: contain; display: block;
  filter: brightness(0) invert(1) !important;
  opacity: 0.72;
  transition: opacity .3s, filter .3s;
}
[data-theme="light"] .collab-logo-item img {
  filter: brightness(0) !important;
  opacity: 0.60;
}
.collab-logo-item:hover img {
  opacity: 1 !important;
  filter: brightness(0) invert(1) drop-shadow(0 0 8px rgba(13,207,184,.65)) !important;
}
[data-theme="light"] .collab-logo-item:hover img {
  filter: saturate(1.4) brightness(.9) !important;
  opacity: 1 !important;
}

.collab-brand-name {
  font-family: var(--font-d);
  font-size: 9.5px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; white-space: nowrap;
  padding: 2px 7px; border-radius: 4px;
}
.collab-logo-item:nth-child(10n+1)  .collab-brand-name { color:var(--teal);    background:var(--teal-pale); }
.collab-logo-item:nth-child(10n+2)  .collab-brand-name { color:var(--amber);   background:var(--amber-pale); }
.collab-logo-item:nth-child(10n+3)  .collab-brand-name { color:var(--indigo);  background:var(--indigo-pale); }
.collab-logo-item:nth-child(10n+4)  .collab-brand-name { color:var(--accent);  background:rgba(226,40,97,.10); }
.collab-logo-item:nth-child(10n+5)  .collab-brand-name { color:var(--sage);    background:var(--sage-pale); }
.collab-logo-item:nth-child(10n+6)  .collab-brand-name { color:var(--teal);    background:var(--teal-pale); }
.collab-logo-item:nth-child(10n+7)  .collab-brand-name { color:var(--amber);   background:var(--amber-pale); }
.collab-logo-item:nth-child(10n+8)  .collab-brand-name { color:var(--indigo);  background:var(--indigo-pale); }
.collab-logo-item:nth-child(10n+9)  .collab-brand-name { color:var(--accent);  background:rgba(226,40,97,.10); }
.collab-logo-item:nth-child(10n+10) .collab-brand-name { color:var(--sage);    background:var(--sage-pale); }

.collab-strip-fade-l { background:linear-gradient(to right,#13102a,transparent) !important; }
.collab-strip-fade-r { background:linear-gradient(to left,#13102a,transparent) !important; }
[data-theme="light"] .collab-strip-fade-l { background:linear-gradient(to right,#eeedfb,transparent) !important; }
[data-theme="light"] .collab-strip-fade-r { background:linear-gradient(to left,#eeedfb,transparent) !important; }
.collab-cta-text svg { color: var(--teal); }

/* ────────────────────────────────────────────────────────────────
   §7  CTA ILLUSTRATION
   ──────────────────────────────────────────────────────────────── */
.cta-illustration {
  width: 260px; flex-shrink: 0;
  position: relative; display: flex; align-items: center; justify-content: center;
}
.cta-illustration svg {
  width: 100%; height: auto;
  filter: drop-shadow(0 10px 36px rgba(13,207,184,.18)) drop-shadow(0 4px 14px rgba(226,40,97,.12));
  animation: ctaFloat 5s ease-in-out infinite;
}
@keyframes ctaFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }
.cta-illustration::after {
  content:''; position:absolute; bottom:-20px; left:50%; transform:translateX(-50%);
  width:140px; height:20px; border-radius:50%;
  background:radial-gradient(ellipse,rgba(13,207,184,.22) 0%,transparent 70%);
  filter:blur(8px); animation:ctaShadow 5s ease-in-out infinite;
}
@keyframes ctaShadow { 0%,100%{transform:translateX(-50%) scaleX(1);opacity:.5} 50%{transform:translateX(-50%) scaleX(.7);opacity:.2} }
@media(max-width:900px) { .cta-illustration { display:none; } }

/* ────────────────────────────────────────────────────────────────
   §8  FULL RESPONSIVE
   ──────────────────────────────────────────────────────────────── */

/* Gen — tablet */
@media(max-width:900px) {
  .gen-section { padding: 64px 0; }
  .gen-mosaic  { grid-template-rows: 100px 100px 100px 90px; }
}

/* Gen — mobile large */
@media(max-width:640px) {
  .gen-section { padding: 48px 0; }
  .gen-mosaic  {
    grid-template-columns: 0.8fr 1fr 1fr;
    grid-template-rows: 90px 90px 90px;
    gap: 5px;
  }
  /* Simplified mobile layout: 3 col, 3 row */
  .gen-tile:nth-child(1)  { grid-column:1;   grid-row:1/3; }
  .gen-tile:nth-child(2)  { grid-column:2;   grid-row:1; }
  .gen-tile:nth-child(3)  { grid-column:3;   grid-row:1; }
  .gen-tile:nth-child(4)  { grid-column:2;   grid-row:2; }
  .gen-tile:nth-child(5)  { grid-column:3;   grid-row:2; }
  .gen-tile:nth-child(6)  { display:none; }
  .gen-tile:nth-child(7)  { grid-column:1;   grid-row:3; }
  .gen-tile:nth-child(8)  { grid-column:2;   grid-row:3; }
  .gen-tile:nth-child(9)  { grid-column:3;   grid-row:3; }
  .gen-tile:nth-child(10) { display:none; }
  .gen-tile:nth-child(11) { display:none; }
  .gen-heading { font-size:clamp(24px,7vw,34px); }
  .gen-checklist { grid-template-columns:1fr; }
}

/* Gen — mobile small */
@media(max-width:420px) {
  .gen-mosaic { grid-template-columns:1fr 1fr; grid-template-rows:90px 90px 90px; }
  .gen-tile:nth-child(1)  { grid-column:1;   grid-row:1/3; }
  .gen-tile:nth-child(2)  { grid-column:2;   grid-row:1; }
  .gen-tile:nth-child(3)  { grid-column:2;   grid-row:2; }
  .gen-tile:nth-child(4)  { grid-column:1;   grid-row:3; }
  .gen-tile:nth-child(5)  { grid-column:2;   grid-row:3; }
  .gen-tile:nth-child(n+6) { display:none; }
}

/* Other sections responsive */
@media(max-width:900px) { .feat-grid { grid-template-columns:1fr 1fr!important; } }
@media(max-width:560px) { .feat-grid { grid-template-columns:1fr!important; } .stats-grid { grid-template-columns:1fr 1fr; } }
@media(max-width:640px) { .grid-3 { grid-template-columns:1fr!important; } }
@media(max-width:600px) { .uc-grid { grid-template-columns:1fr 1fr!important; } }
@media(max-width:400px) { .uc-grid { grid-template-columns:1fr!important; } }
@media(max-width:768px) { .blog-slide { flex:0 0 calc(50% - 12px)!important; } }
@media(max-width:480px) { .blog-slide { flex:0 0 100%!important; } }
@media(max-width:760px) { .pricing-grid { grid-template-columns:1fr!important; max-width:400px; margin:0 auto; } }
@media(max-width:700px) { .footer-grid { grid-template-columns:1fr 1fr!important; gap:28px; } }
@media(max-width:440px) { .footer-grid { grid-template-columns:1fr!important; } .footer-bottom { flex-direction:column; } }
@media(max-width:820px) { .collab-stats { gap:16px; } }
@media(max-width:600px) { .cta-wrap { padding:36px 20px!important; } }
/* ══════════════════════════════════════════════════════════════
   COLLAB STRIP — Redesigned items with icon + title + tag
   (replaces the old inline-div structure)
   ══════════════════════════════════════════════════════════════ */

/* Override the old flex-direction so items stack vertically */
.collab-logo-item {
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  padding: 14px 18px !important;
  min-width: 100px;
  cursor: default;
  border-radius: 14px;
  transition: background .25s ease, transform .3s ease, box-shadow .3s ease !important;
}
.collab-logo-item:hover {
  transform: translateY(-5px) scale(1.07) !important;
  background: rgba(255,255,255,.06) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.25) !important;
}
[data-theme="light"] .collab-logo-item:hover {
  background: rgba(0,0,0,.04) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.08) !important;
}

/* The letter-icon badge */
.collab-icon-letter {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 900;
  color: #fff;
  flex-shrink: 0;
  transition: transform .3s ease, box-shadow .3s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
  text-shadow: 0 1px 2px rgba(0,0,0,.3);
}
.collab-logo-item:hover .collab-icon-letter {
  transform: scale(1.12) translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,.35);
}

/* Company name — prominently shown */
.collab-brand-title {
  font-family: var(--font-d);
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  letter-spacing: -.01em;
  opacity: .85;
  transition: opacity .25s ease, color .25s ease;
}
.collab-logo-item:hover .collab-brand-title {
  opacity: 1;
  color: var(--text);
}

/* Category pill tag — uses existing nth-child colour rules */
.collab-brand-name {
  font-size: 9px !important;
  opacity: .75;
  transition: opacity .25s ease !important;
}
.collab-logo-item:hover .collab-brand-name {
  opacity: 1 !important;
}

/* Responsive: hide on very small screens */
@media (max-width: 480px) {
  .collab-brand-title { display: none; }
}

/* ══════════════════════════════════════════════════════════════
   HOMEPAGE PRICING GRID — always 3 columns, responsive collapse
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 820px) {
  /* 2 columns on tablets */
  #section-pricing .pricing-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 520px) {
  /* Single column on phones */
  #section-pricing .pricing-grid {
    grid-template-columns: 1fr !important;
    max-width: 380px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ══════════════════════════════════════════════════════════════
   MOBILE MENU — lang selector positioning
   ══════════════════════════════════════════════════════════════ */
.mobile-menu .lang-selector { display: block; }
.mobile-menu .lang-selector .lang-dropdown {
  /* In mobile menu the dropdown should open upward if near bottom, left-align */
  right: auto !important;
  left: 0 !important;
  min-width: 200px !important;
}