/* ==========================================================
   EMOJI INVISIBLE — "AURORA GLASS" DESIGN SEED
   The featured emoji (🫥) is something that fades between
   visible and invisible. Every surface on this site borrows
   that idea: translucent glass panels that sharpen and
   brighten on interaction, drifting aurora-colored light
   behind the hero. A local-first Poppins stack keeps the site fast and consistent without external font downloads.
   ========================================================== */

:root{
  --ink:#f8fafc;
  --ink-soft:#ffffff;
  --ink-softer:#f1f4fb;
  --glass-violet:#6858e8;
  --glass-violet-dim:#5142c7;
  --teal:#0f9488;
  --amber:#e58a12;
  --paper:#182238;
  --paper-dim:#5d687d;
  --line:rgba(81,66,170,0.13);
  --line-strong:rgba(81,66,170,0.24);
  --glass-bg:#ffffff;
  --glass-bg-hover:#fbfaff;
  --shadow-glow:0 14px 34px rgba(81,66,199,0.20);
  --radius-lg:26px;
  --radius-md:16px;
  --radius-sm:10px;
  --maxw:1160px;
  --font:"Poppins","Segoe UI",system-ui,-apple-system,Roboto,Arial,Helvetica,sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
[hidden]{ display:none !important; }

html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}

body{
  margin:0;
  font-family:var(--font);
  background:
    radial-gradient(circle at 8% 4%,rgba(104,88,232,.08),transparent 28%),
    radial-gradient(circle at 94% 24%,rgba(15,148,136,.07),transparent 26%),
    linear-gradient(180deg,#fcfcff 0%,#f7f9fd 48%,#ffffff 100%);
  color:var(--paper);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:var(--font); cursor:pointer; }
input,select,textarea{ font-family:var(--font); }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,p{ margin:0; }
h1,h2,h3,h4{ text-align:center; }

.container{ max-width:var(--maxw); margin:0 auto; padding:0 20px; }

:focus-visible{
  outline:2px solid var(--teal);
  outline-offset:3px;
  border-radius:6px;
}

.visually-hidden{
  position:absolute !important;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;border:0;
}

.skip-link{
  position:absolute; left:12px; top:-60px;
  background:var(--glass-violet); color:#fff;
  padding:10px 16px; border-radius:8px; font-weight:600;
  z-index:1000; transition:top .2s ease;
}
.skip-link:focus{ top:12px; }

/* aurora backdrop blobs */
.aurora-field{ position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none; }
.aurora-field .blob{
  position:absolute; border-radius:50%;
  filter:blur(80px); opacity:.10;
  animation:none;
}
.aurora-field .b1{ width:520px; height:520px; background:var(--glass-violet); top:-160px; left:-120px; }
.aurora-field .b2{ width:420px; height:420px; background:var(--teal); top:20%; right:-140px; animation-delay:-6s; }
.aurora-field .b3{ width:380px; height:380px; background:var(--amber); bottom:-140px; left:30%; animation-delay:-12s; }
@keyframes drift{ from{ transform:translate(0,0) scale(1);} to{ transform:translate(40px,-30px) scale(1.08);} }

/* ---------------- Glass utility ---------------- */
.glass{
  background:var(--glass-bg);
  border:1px solid var(--line);
  box-shadow:0 9px 24px rgba(35,40,78,.07);
  border-radius:var(--radius-lg);
  transition:background .25s ease, border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.glass:hover{ background:var(--glass-bg-hover); border-color:var(--line-strong); box-shadow:0 15px 34px rgba(71,61,150,.12); }

/* ---------------- Header ---------------- */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,0.96);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:14px 20px; max-width:var(--maxw); margin:0 auto;
}
.brand{ display:flex; align-items:center; gap:10px; font-weight:700; font-size:1.05rem; letter-spacing:.2px; white-space:nowrap; }
.brand-emoji{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:12px;
  background:linear-gradient(145deg, rgba(117,103,232,.20), rgba(21,154,140,.14));
  border:1px solid var(--line-strong); font-size:1.25rem;
}
.main-nav{ display:none; }
.main-nav ul{ display:flex; align-items:center; gap:6px; }
.main-nav a{
  display:inline-block; padding:9px 14px; border-radius:10px;
  font-size:.92rem; font-weight:500; color:var(--paper-dim);
  transition:background .2s ease,color .2s ease;
}
.main-nav a:hover, .main-nav a[aria-current="page"]{ background:var(--glass-bg-hover); color:var(--paper); }

.menu-toggle{
  display:inline-flex; align-items:center; justify-content:center;
  width:42px; height:42px; border-radius:12px;
  background:var(--glass-bg); border:1px solid var(--line);
  color:var(--paper);
}
.menu-toggle svg{ width:20px; height:20px; }

.mobile-drawer{
  display:none; flex-direction:column; gap:2px;
  padding:10px 20px 18px; border-top:1px solid var(--line);
  background:rgba(255,255,255,0.98);
}
.mobile-drawer.open{ display:flex; }
.mobile-drawer a{ padding:12px 8px; border-radius:10px; color:var(--paper-dim); font-weight:500; }
.mobile-drawer a:hover{ background:var(--glass-bg-hover); color:var(--paper); }

@media (min-width:900px){
  .main-nav{ display:block; }
  .menu-toggle{ display:none; }
  .mobile-drawer{ display:none !important; }
}

/* ---------------- Buttons ---------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 22px; border-radius:999px; font-weight:600; font-size:.95rem;
  border:1px solid var(--line-strong); background:var(--glass-bg); color:var(--paper);
  transition:transform .18s ease, background .2s ease, box-shadow .2s ease;
  white-space:nowrap;
}
.btn:hover{ transform:translateY(-2px); background:var(--glass-bg-hover); }
.btn-primary{ background:linear-gradient(135deg, var(--glass-violet), var(--teal)); border-color:transparent; color:#fff; }
.btn-primary:hover{ background:linear-gradient(135deg, var(--glass-violet), var(--teal)); box-shadow:var(--shadow-glow); }
.btn-outline{ background:transparent; }
.btn-sm{ padding:8px 14px; font-size:.85rem; border-radius:999px; }
.btn-block{ width:100%; }

/* action buttons on cards */
.card-actions{ display:flex; gap:8px; flex-wrap:wrap; }
.act-copy, .act-info, .act-download{
  flex:1 1 auto; min-width:0;
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:9px 10px; border-radius:999px; font-size:.82rem; font-weight:600;
  border:1px solid var(--line-strong); background:#fff; color:#26324a;
  min-height:40px; white-space:nowrap;
}
.act-copy{ background:rgba(104,88,232,.075); border-color:rgba(104,88,232,.22); color:#5042bd; }
.act-info{ background:rgba(15,148,136,.075); border-color:rgba(15,148,136,.22); color:#0b756d; }
.act-copy:hover{ background:rgba(104,88,232,.13); border-color:rgba(104,88,232,.38); color:#4335ad; box-shadow:0 8px 18px rgba(81,66,199,.12); }
.act-info:hover{ background:rgba(15,148,136,.13); border-color:rgba(15,148,136,.38); color:#075f58; box-shadow:0 8px 18px rgba(15,148,136,.11); }
.act-download:hover{ box-shadow:0 10px 22px rgba(81,66,199,.18); }
.act-copy.is-success{ background:rgba(21,154,140,.10); border-color:var(--teal); color:#0d766c; }
.act-download.is-success{ background:rgba(216,132,19,.11); border-color:var(--amber); color:#9a5b0a; }

/* ---------------- Layout sections ---------------- */
main{ display:block; }
.section{ padding:64px 0; }
.section-tight{ padding:40px 0; }
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.78rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--teal); margin-bottom:14px;
}
.section-head{ max-width:720px; margin:0 auto 32px; text-align:center; }
.section-head h2{ font-size:clamp(1.5rem,3vw,2.1rem); font-weight:700; margin-bottom:10px; }
.section-head p{ color:var(--paper-dim); margin-left:auto; margin-right:auto; }
.section-head .eyebrow{ justify-content:center; }

/* ---------------- Hero ---------------- */
.hero{ padding:52px 0 20px; position:relative; }
.hero-grid{ display:grid; gap:36px; align-items:center; grid-template-columns:1.1fr .9fr; }
.hero-copy h1{
  font-size:clamp(2.1rem,5vw,3.1rem); font-weight:700; line-height:1.12; margin-bottom:16px;
}
.hero-copy{ text-align:center; }
.hero-copy h1 .accent{ color:var(--glass-violet); }
.hero-copy p.lede{ color:var(--paper-dim); font-size:1.05rem; max-width:52ch; margin:0 auto 24px; }
.hero-actions{ display:flex; justify-content:center; flex-wrap:wrap; gap:12px; margin-bottom:22px; }
.code-pills{ display:flex; justify-content:center; flex-wrap:wrap; gap:8px; margin-bottom:8px; }
.code-pill{
  font-size:.78rem; padding:7px 12px; border-radius:999px;
  background:var(--glass-bg); border:1px solid var(--line); color:var(--paper-dim);
  font-variant-numeric:tabular-nums;
}
.code-pill b{ color:var(--paper); font-weight:600; }

.hero-showcase{
  position:relative; aspect-ratio:1/1; border-radius:28px;
  display:flex; align-items:center; justify-content:center;
  font-size:7rem;
}
.hero-showcase .disc{
  position:absolute; inset:8%; border-radius:50%;
  background:radial-gradient(circle at 30% 30%, rgba(117,103,232,.24), rgba(21,154,140,.10) 60%, transparent 75%);
  border:1px solid var(--line);
}

/* hero controls */
.hero-controls{ margin-top:30px; }
.control-row{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-bottom:14px; }
.search-field{
  flex:1 1 260px; display:flex; align-items:center; gap:10px;
  padding:10px 16px; border-radius:999px;
}
.search-field input{
  flex:1; background:transparent; border:0; color:var(--paper); font-size:.95rem;
}
.search-field input::placeholder{ color:var(--paper-dim); }
.search-field input:focus{ outline:none; }

.select-field{
  padding:10px 14px; border-radius:999px; background:var(--glass-bg);
  border:1px solid var(--line); color:var(--paper); font-size:.88rem;
}
label.field-label{ font-size:.78rem; color:var(--paper-dim); margin-right:6px; }

.filter-strip{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:10px; }
.chip{
  padding:8px 14px; border-radius:999px; font-size:.82rem; font-weight:500;
  background:var(--glass-bg); border:1px solid var(--line); color:var(--paper-dim);
}
.chip[aria-pressed="true"]{ background:var(--glass-violet); color:#fff; border-color:transparent; font-weight:700; }

.result-row{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; margin:6px 0 18px; }
.result-count{ font-size:.86rem; font-weight:500; color:#566278; text-align:center; }
.reset-btn{ font-size:.82rem; color:var(--teal); background:transparent; border:0; padding:6px 4px; }

/* ---------------- Cards grid ---------------- */
.grid{ display:grid; gap:16px; }
.grid-4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
.grid-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.grid-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
@media (max-width:1000px){ .grid-4{ grid-template-columns:repeat(3,minmax(0,1fr));} }
@media (max-width:760px){ .grid-4,.grid-3{ grid-template-columns:repeat(2,minmax(0,1fr));} .grid-2{ grid-template-columns:1fr;} }
@media (max-width:520px){
  .grid-4,.grid-3{ grid-template-columns:1fr; }
  .container{ padding-left:16px; padding-right:16px; }
  .tabs-row{ justify-content:center; }
  .control-row{ align-items:stretch; }
  .control-row .search-field,
  .control-row .select-field{ flex:1 1 100%; width:100%; max-width:100%; }
  .page-hero{ padding-top:42px; }
  .page-hero h1{ font-size:clamp(1.75rem,9vw,2.15rem); overflow-wrap:anywhere; }
  .result-count{ line-height:1.55; }
}

.emoji-card{
  --emoji-accent:var(--glass-violet);
  --emoji-rgb:117,103,232;
  --emoji-hue:0deg;
  --emoji-tilt:0deg;
  --emoji-scale:1;
  --emoji-sat:1.08;
  padding:16px; display:flex; flex-direction:column; gap:10px; text-align:center;
  position:relative; overflow:hidden; opacity:.98;
  border-color:rgba(var(--emoji-rgb),.18);
  background:linear-gradient(180deg,rgba(var(--emoji-rgb),.08),rgba(255,255,255,.98) 46%),#fff;
}
.emoji-card::before{
  content:""; position:absolute; inset:0 0 auto; height:3px;
  background:linear-gradient(90deg,transparent,var(--emoji-accent),transparent);
  opacity:.72; pointer-events:none;
}
.emoji-card .preview-btn{
  border:1px solid rgba(var(--emoji-rgb),.16); padding:14px 8px; width:100%; min-height:98px;
  border-radius:14px; font-size:2.72rem; line-height:1;
  display:flex; align-items:center; justify-content:center;
  position:relative; overflow:hidden; isolation:isolate;
  background:linear-gradient(145deg,rgba(var(--emoji-rgb),.14),rgba(255,255,255,.86));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.78);
  transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease,background .22s ease;
}
.emoji-card .preview-btn::before,
.emoji-card .preview-btn::after{ content:""; position:absolute; pointer-events:none; z-index:-1; }
.emoji-card .emoji-glyph{
  position:relative; z-index:2; display:inline-block;
  font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;
  transform:rotate(var(--emoji-tilt)) scale(var(--emoji-scale));
  filter:drop-shadow(0 7px 8px rgba(var(--emoji-rgb),.18));
  transition:transform .22s ease,filter .22s ease;
}
.emoji-card .preview-btn:hover{
  border-color:rgba(var(--emoji-rgb),.32);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.88),0 10px 22px rgba(var(--emoji-rgb),.12);
  transform:translateY(-1px);
}
.emoji-card .preview-btn:hover .emoji-glyph{
  transform:rotate(var(--emoji-tilt)) scale(1.11);
  filter:drop-shadow(0 9px 10px rgba(var(--emoji-rgb),.24));
}
.emoji-card[data-visual="halo"] .preview-btn{
  background:radial-gradient(circle at 50% 52%,rgba(var(--emoji-rgb),.22) 0 29%,rgba(var(--emoji-rgb),.07) 30% 54%,transparent 55%),linear-gradient(145deg,#fff,rgba(var(--emoji-rgb),.08));
}
.emoji-card[data-visual="split"] .preview-btn{
  background:linear-gradient(135deg,rgba(var(--emoji-rgb),.19) 0 49%,rgba(255,255,255,.92) 50% 100%);
}
.emoji-card[data-visual="rings"] .preview-btn{
  background:radial-gradient(circle,transparent 0 31%,rgba(var(--emoji-rgb),.20) 32% 34%,transparent 35% 51%,rgba(var(--emoji-rgb),.12) 52% 54%,transparent 55%),linear-gradient(145deg,#fff,rgba(var(--emoji-rgb),.08));
}
.emoji-card[data-visual="dots"] .preview-btn{
  background:radial-gradient(circle at 12px 12px,rgba(var(--emoji-rgb),.17) 0 3px,transparent 4px) 0 0/24px 24px,linear-gradient(145deg,#fff,rgba(var(--emoji-rgb),.09));
}
.emoji-card[data-visual="stripe"] .preview-btn{
  background:repeating-linear-gradient(135deg,rgba(var(--emoji-rgb),.13) 0 9px,rgba(255,255,255,.86) 9px 19px);
}
.emoji-card[data-visual="spotlight"] .preview-btn{
  background:radial-gradient(circle at 32% 24%,rgba(255,255,255,.98) 0 14%,transparent 42%),linear-gradient(145deg,rgba(var(--emoji-rgb),.18),rgba(255,255,255,.90));
}
.emoji-card[data-visual="frame"] .preview-btn{
  background:linear-gradient(145deg,#fff,rgba(var(--emoji-rgb),.08));
  box-shadow:inset 0 0 0 7px rgba(var(--emoji-rgb),.08),inset 0 1px 0 rgba(255,255,255,.82);
}
.emoji-card[data-visual="bubble"] .preview-btn{
  background:linear-gradient(145deg,#fff,rgba(var(--emoji-rgb),.09));
}
.emoji-card[data-visual="bubble"] .preview-btn::before{
  width:52px;height:52px;border-radius:50%;right:-12px;top:-15px;background:rgba(var(--emoji-rgb),.15);
}
.emoji-card[data-visual="bubble"] .preview-btn::after{
  width:28px;height:28px;border-radius:50%;left:9px;bottom:8px;background:rgba(var(--emoji-rgb),.10);
}
.emoji-card[data-visual="wave"] .preview-btn{
  background:radial-gradient(80px 42px at 20% 108%,rgba(var(--emoji-rgb),.18) 0 68%,transparent 70%),radial-gradient(90px 46px at 82% -8%,rgba(var(--emoji-rgb),.14) 0 68%,transparent 70%),#fff;
}
.emoji-card[data-visual="minimal"] .preview-btn{
  background:#fff; border-style:dashed; border-color:rgba(var(--emoji-rgb),.34);
}
.emoji-card[data-color="Colorful"] .preview-btn{
  background:linear-gradient(135deg,rgba(117,103,232,.16),rgba(21,154,140,.13),rgba(216,132,19,.13),rgba(207,90,166,.13));
}
.emoji-card .name{ font-size:.88rem; font-weight:700; line-height:1.35; color:#19243b; }
.emoji-card .meta{ font-size:.73rem; font-weight:500; color:#69748a; }

/* signature: cards start faint, sharpen toward full visibility on hover/focus —
   a literal enactment of the invisible-to-visible featured emoji */
.emoji-card:hover, .emoji-card:focus-within{ opacity:1; transform:translateY(-3px); }

/* Emoji card actions: equal Copy/Info row + full-width Download row. */
.emoji-card .card-actions{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:8px; width:100%; margin-top:auto;
}
.emoji-card .act-copy,
.emoji-card .act-info,
.emoji-card .act-download{
  width:100%; max-width:100%; min-width:0; overflow:visible;
}
.emoji-card .act-download{
  grid-column:1 / -1;
}
.emoji-card .act-download:not(.is-success){
  background:linear-gradient(135deg, var(--glass-violet), var(--teal));
  border-color:transparent; color:#fff;
}
.emoji-card .act-download:not(.is-success):hover{
  background:linear-gradient(135deg, var(--glass-violet), var(--teal));
  box-shadow:var(--shadow-glow); transform:translateY(-1px);
}
.emoji-card .btn-text{ display:block; min-width:0; white-space:nowrap; }

@media (max-width:380px){
  .emoji-card{ padding:12px; }
  .emoji-card .card-actions{ gap:6px; }
  .emoji-card .act-copy,
  .emoji-card .act-info,
  .emoji-card .act-download{ padding:8px 6px; font-size:.78rem; }
}

.badge{
  position:absolute; top:10px; left:10px; font-size:.66rem; font-weight:700;
  padding:3px 9px; border-radius:999px; background:rgba(var(--emoji-rgb),.10);
  border:1px solid rgba(var(--emoji-rgb),.22); color:#39445d; text-transform:uppercase; letter-spacing:.05em;
}
.badge-related{ background:rgba(104,88,232,.10); border-color:rgba(104,88,232,.24); color:#5042bd; }

.show-more-row{ display:flex; justify-content:center; gap:12px; margin-top:24px; flex-wrap:wrap; }
.btn.is-loading{ opacity:.72; pointer-events:none; }
.btn.is-loading::before{ content:""; width:14px; height:14px; border:2px solid rgba(255,255,255,.55); border-top-color:#fff; border-radius:50%; animation:button-spin .7s linear infinite; }
@keyframes button-spin{ to{ transform:rotate(360deg); } }

.empty-state{ text-align:center; padding:40px 20px; color:var(--paper-dim); }

/* ---------------- Generator ---------------- */
.generator{
  display:grid; grid-template-columns:1fr 1fr; gap:28px; padding:32px; align-items:start;
}
@media (max-width:860px){ .generator{ grid-template-columns:1fr; } }
.gen-controls{ display:flex; flex-direction:column; gap:16px; }
.gen-field{ display:flex; flex-direction:column; gap:6px; }
.gen-field label{ font-size:.82rem; color:var(--paper-dim); font-weight:600; }
.gen-field input[type="range"]{ width:100%; accent-color:var(--glass-violet); }
.gen-field input[type="text"], .gen-field input[type="color"]{
  padding:10px 12px; border-radius:10px; background:var(--glass-bg);
  border:1px solid var(--line); color:var(--paper);
}
.gen-row-2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.gen-toggle-row{ display:flex; gap:18px; flex-wrap:wrap; }
.gen-toggle{ display:flex; align-items:center; gap:8px; font-size:.86rem; color:var(--paper-dim); }
.gen-preview{
  display:flex; align-items:center; justify-content:center; min-height:340px; border-radius:20px;
  background-image:
    linear-gradient(45deg, #e8eaf2 25%, transparent 25%),
    linear-gradient(-45deg, #e8eaf2 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #e8eaf2 75%),
    linear-gradient(-45deg, transparent 75%, #e8eaf2 75%);
  background-size:20px 20px; background-position:0 0,0 10px,10px -10px,-10px 0;
  background-color:#ffffff;
}
#gen-canvas{ max-width:100%; max-height:320px; }

/* ---------------- FAQ ---------------- */
.faq-item{ border-bottom:1px solid var(--line); }
.faq-q{
  width:100%; text-align:left; background:transparent; border:0; color:var(--paper);
  padding:18px 4px; font-weight:600; font-size:.98rem; display:flex; justify-content:space-between; gap:16px; align-items:center;
}
.faq-q .plus{ transition:transform .2s ease; color:var(--teal); font-size:1.2rem; }
.faq-q[aria-expanded="true"] .plus{ transform:rotate(45deg); }
.faq-a{ padding:0 4px 18px; color:var(--paper-dim); font-size:.92rem; display:none; }
.faq-a.open{ display:block; }

/* ---------------- Footer ---------------- */
.site-footer{ border-top:1px solid var(--line); background:rgba(255,255,255,.72); padding:48px 0 24px; margin-top:60px; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:28px; margin-bottom:30px; }
@media (max-width:760px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:480px){ .footer-grid{ grid-template-columns:1fr; } }
.footer-col{ text-align:center; }
.footer-col h4{ font-size:.82rem; text-transform:uppercase; letter-spacing:.08em; color:var(--paper-dim); margin-bottom:12px; }
.footer-col ul li{ margin-bottom:8px; }
.footer-col a{ color:var(--paper-dim); font-size:.9rem; }
.footer-col a:hover{ color:var(--paper); }
.footer-desc{ color:var(--paper-dim); font-size:.9rem; max-width:36ch; margin:10px auto 0; }
.footer-bottom{ border-top:1px solid var(--line); padding-top:18px; width:100%; text-align:center; font-size:.8rem; color:var(--paper-dim); }

/* ---------------- Modal ---------------- */
.modal-overlay{
  position:fixed; inset:0; background:rgba(37,39,58,.28); backdrop-filter:blur(5px);
  display:none; align-items:center; justify-content:center; z-index:200; padding:20px;
}
.modal-overlay.open{ display:flex; }
.modal-box{
  width:100%; max-width:420px; padding:28px; border-radius:24px; background:var(--ink-soft);
  border:1px solid var(--line-strong); position:relative; max-height:86vh; overflow:auto;
}
.modal-close{
  position:absolute; top:14px; right:14px; width:36px; height:36px; border-radius:10px;
  background:var(--glass-bg); border:1px solid var(--line); color:var(--paper);
}
.modal-emoji{ font-size:4rem; text-align:center; margin-bottom:6px; }
.modal-title{ font-size:1.2rem; font-weight:700; text-align:center; margin-bottom:4px; }
.modal-sub{ text-align:center; color:var(--paper-dim); font-size:.85rem; margin-bottom:18px; }
.modal-codes{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-bottom:18px; }
.modal-tags{ display:flex; flex-wrap:wrap; gap:6px; justify-content:center; margin-bottom:18px; }
.tag-pill{ font-size:.72rem; padding:4px 10px; border-radius:999px; background:var(--glass-bg); border:1px solid var(--line); color:var(--paper-dim); }

/* ---------------- Generic content pages ---------------- */
.page-hero{ padding:56px 0 24px; text-align:center; }
.page-hero h1{ font-size:clamp(1.8rem,4vw,2.6rem); font-weight:700; margin-bottom:12px; }
.page-hero .eyebrow{ justify-content:center; }
.page-hero p{ color:var(--paper-dim); max-width:60ch; margin-left:auto; margin-right:auto; }
.breadcrumbs{ font-size:.8rem; color:var(--paper-dim); padding:18px 0 0; text-align:center; }
.breadcrumbs a{ color:var(--paper-dim); }
.breadcrumbs a:hover{ color:var(--teal); }
.prose{ max-width:74ch; margin-left:auto; margin-right:auto; }
.prose h2{ font-size:1.35rem; font-weight:700; margin:34px 0 12px; }
.prose h3{ font-size:1.1rem; font-weight:700; margin:24px 0 10px; }
.prose p{ margin-bottom:14px; color:var(--paper-dim); }
.prose ul{ margin-bottom:14px; padding-left:20px; list-style:disc; color:var(--paper-dim); }
.prose li{ margin-bottom:6px; }
.prose a{ color:var(--teal); text-decoration:underline; }

.legal-box{ padding:32px; }

.category-card{ padding:22px; display:flex; flex-direction:column; gap:12px; }
.category-card h3{ font-size:1.1rem; font-weight:700; text-align:center; }
.category-card .count{ font-size:.78rem; color:var(--paper-dim); }
.category-samples{ display:flex; justify-content:center; gap:8px; font-size:1.6rem; }
.category-samples button{ background:transparent; border:0; }

.combo-card{ padding:20px; display:flex; flex-direction:column; gap:10px; }
.combo-display{ font-size:2rem; }
.combo-meaning{ font-size:.85rem; color:var(--paper-dim); }
.combo-label{ font-size:.7rem; text-transform:uppercase; letter-spacing:.06em; color:var(--teal); font-weight:700; }

.blog-card{ padding:0; overflow:hidden; display:flex; flex-direction:column; }
.blog-cover{
  aspect-ratio:16/9; display:flex; align-items:center; justify-content:center; font-size:3rem;
  background:linear-gradient(135deg, rgba(117,103,232,.22), rgba(21,154,140,.14));
  border-bottom:1px solid var(--line);
}
.blog-card-body{ padding:18px; display:flex; flex-direction:column; gap:8px; flex:1; }
.blog-date{ font-size:.74rem; color:var(--paper-dim); }
.blog-card-body h3{ font-size:1.02rem; font-weight:700; line-height:1.35; text-align:center; }
.blog-excerpt{ font-size:.86rem; color:var(--paper-dim); flex:1; }
.blog-read{ font-size:.8rem; color:var(--teal); font-weight:600; }

.related-posts{ display:grid; gap:16px; grid-template-columns:repeat(3,1fr); margin-top:14px; }
@media (max-width:760px){ .related-posts{ grid-template-columns:1fr; } }

.tabs-row{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:20px; }
.tab-btn{ padding:9px 16px; border-radius:999px; background:var(--glass-bg); border:1px solid var(--line); color:var(--paper-dim); font-size:.85rem; font-weight:600; }
.tab-btn[aria-selected="true"]{ background:var(--glass-violet); color:#fff; border-color:transparent; }

.status-live{ font-size:.8rem; color:var(--paper-dim); }

.error-illustration{ font-size:6rem; text-align:center; margin-bottom:10px; }

@media (max-width:640px){
  .generator{ padding:20px; }
  .hero-grid{ grid-template-columns:1fr; }
  .hero-showcase{ max-width:280px; margin:0 auto; }
}

/* Mobile spacing refinement */
@media (max-width:520px){
  .hero{ padding-top:34px; }
  .hero-grid{ gap:22px; }
  .hero-copy h1{ margin-bottom:12px; }
  .hero-copy p.lede{ margin-bottom:18px; }
  .hero-controls{ margin-top:22px; }
  .page-hero{ padding-top:34px; padding-bottom:18px; }
  .section{ padding-top:48px; padding-bottom:48px; }
  .section-tight{ padding-top:30px; padding-bottom:30px; }
  .section-head{ margin-bottom:24px; }
}


/* ==========================================================
   PROFESSIONAL CONTENT PAGE ENHANCEMENTS
   Added without changing existing tool IDs, SEO metadata, or JS hooks.
   ========================================================== */
.breadcrumb-list{display:flex;flex-wrap:wrap;justify-content:center;gap:7px;list-style:none;padding:0;margin:0;}
.page-hero{
  position:relative;overflow:hidden;margin-top:18px;padding:62px 44px 44px;
  border:1px solid rgba(81,66,170,.14);border-radius:30px;
  background:
    radial-gradient(circle at 12% 14%,rgba(104,88,232,.13),transparent 26%),
    radial-gradient(circle at 90% 78%,rgba(15,148,136,.11),transparent 28%),
    linear-gradient(145deg,rgba(255,255,255,.98),rgba(247,248,255,.96));
  box-shadow:0 20px 50px rgba(52,55,99,.08);
}
.page-hero::before,.page-hero::after{content:"";position:absolute;border-radius:50%;pointer-events:none;}
.page-hero::before{width:150px;height:150px;left:-58px;top:-70px;border:28px solid rgba(104,88,232,.06);}
.page-hero::after{width:120px;height:120px;right:-38px;bottom:-56px;border:24px solid rgba(15,148,136,.06);}
.page-hero>*{position:relative;z-index:1;}
.page-hero .eyebrow{padding:7px 13px;border-radius:999px;background:rgba(15,148,136,.08);border:1px solid rgba(15,148,136,.15);margin-bottom:12px;}
.page-hero h1{max-width:920px;margin-left:auto;margin-right:auto;font-size:clamp(2rem,4.5vw,3rem);line-height:1.16;letter-spacing:-.025em;}
.page-hero p{max-width:760px;font-size:1rem;line-height:1.75;}
.page-content-section{position:relative;}
.page-content-section+.page-content-section{padding-top:28px;}
.hero-badges{display:flex;justify-content:center;flex-wrap:wrap;gap:9px;margin-top:24px;}
.hero-badges span{padding:8px 13px;border:1px solid var(--line);background:rgba(255,255,255,.78);border-radius:999px;font-size:.78rem;font-weight:600;color:#47536a;box-shadow:0 6px 14px rgba(45,48,83,.04);}
.section-head{max-width:780px;}
.section-head h2,.split-copy h2,.values-copy h2,.cta-panel h2,.info-callout h2,.contact-primary h2,.legal-summary h2{font-size:clamp(1.55rem,3vw,2.15rem);line-height:1.25;letter-spacing:-.018em;}
.section-head p{line-height:1.75;}
.professional-grid{align-items:stretch;}
.content-card{padding:25px 22px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px;min-height:100%;}
.content-card .card-icon{width:52px;height:52px;display:flex;align-items:center;justify-content:center;border-radius:16px;font-size:1.45rem;background:linear-gradient(145deg,rgba(104,88,232,.13),rgba(15,148,136,.10));border:1px solid var(--line);}
.content-card h3{font-size:1.04rem;line-height:1.35;}
.content-card p{font-size:.89rem;color:var(--paper-dim);line-height:1.7;}
.split-feature{display:grid;grid-template-columns:1.08fr .92fr;align-items:center;gap:38px;padding:42px;overflow:hidden;}
.split-copy{text-align:left;}
.split-copy h2,.split-copy .eyebrow,.values-copy h2,.values-copy .eyebrow{text-align:left;justify-content:flex-start;}
.split-copy p,.values-copy p{color:var(--paper-dim);line-height:1.78;margin-top:14px;}
.mission-visual{position:relative;min-height:310px;display:flex;align-items:center;justify-content:center;border-radius:24px;background:radial-gradient(circle,rgba(104,88,232,.14),rgba(15,148,136,.06) 52%,transparent 70%);border:1px solid var(--line);}
.mission-emoji{font-size:7rem;filter:drop-shadow(0 15px 22px rgba(81,66,199,.18));}
.orbit-chip{position:absolute;padding:8px 13px;border-radius:999px;background:#fff;border:1px solid var(--line);box-shadow:0 10px 22px rgba(40,45,80,.09);font-size:.75rem;font-weight:700;color:#4a5570;}
.chip-one{top:15%;left:13%;}.chip-two{top:17%;right:12%;}.chip-three{bottom:16%;left:12%;}.chip-four{bottom:14%;right:10%;}
.steps-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;}
.step-card{padding:27px 24px;text-align:center;position:relative;overflow:hidden;}
.step-card::before{content:"";position:absolute;inset:0 0 auto;height:4px;background:linear-gradient(90deg,var(--glass-violet),var(--teal));}
.step-number{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:14px;background:rgba(104,88,232,.09);color:var(--glass-violet-dim);font-weight:700;margin-bottom:13px;}
.step-card h3{font-size:1.05rem;margin-bottom:8px;}.step-card p{font-size:.89rem;color:var(--paper-dim);line-height:1.7;}
.values-layout{display:grid;grid-template-columns:1.12fr .88fr;gap:24px;align-items:stretch;}
.values-copy{padding:28px 14px 28px 0;}
.check-list{display:grid;gap:10px;margin-top:20px;}
.check-list li{position:relative;padding-left:30px;color:#4f5a70;font-size:.92rem;}
.check-list li::before{content:"✓";position:absolute;left:0;top:0;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(15,148,136,.10);color:var(--teal);font-size:.75rem;font-weight:700;}
.trust-panel{padding:30px;display:flex;flex-direction:column;justify-content:center;text-align:center;}
.trust-mark{width:58px;height:58px;border-radius:18px;display:flex;align-items:center;justify-content:center;margin:0 auto 15px;background:linear-gradient(145deg,var(--glass-violet),var(--teal));color:#fff;font-size:1.6rem;font-weight:700;box-shadow:var(--shadow-glow);}
.trust-panel h3{font-size:1.2rem;margin-bottom:10px;}.trust-panel p{color:var(--paper-dim);font-size:.89rem;line-height:1.72;margin-top:9px;}
.cta-panel{padding:34px 38px;display:flex;align-items:center;justify-content:space-between;gap:30px;background:linear-gradient(135deg,rgba(104,88,232,.10),rgba(15,148,136,.07)),#fff;}
.cta-panel .eyebrow,.cta-panel h2{text-align:left;justify-content:flex-start;}.cta-panel p{color:var(--paper-dim);margin-top:8px;max-width:650px;}.cta-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end;}
.info-callout{padding:32px 36px;display:grid;grid-template-columns:.8fr 1.2fr;gap:32px;align-items:center;border-left:5px solid var(--teal);}
.info-callout .eyebrow,.info-callout h2{text-align:left;justify-content:flex-start;}.info-callout p{color:var(--paper-dim);line-height:1.78;}
.contact-layout{display:grid;grid-template-columns:1.05fr .95fr;gap:22px;align-items:stretch;}
.contact-primary{padding:38px;text-align:left;display:flex;flex-direction:column;justify-content:center;}
.contact-primary .eyebrow,.contact-primary h2{text-align:left;justify-content:flex-start;}.contact-primary h2{overflow-wrap:anywhere;margin-bottom:14px;}.contact-primary>p{color:var(--paper-dim);line-height:1.78;}
.contact-note{margin-top:22px;padding:16px 18px;border-radius:14px;background:rgba(104,88,232,.06);border:1px solid var(--line);font-size:.86rem;color:#556078;line-height:1.65;}
.contact-topics{display:grid;gap:14px;}.contact-topics .content-card{display:grid;grid-template-columns:auto 1fr;text-align:left;align-items:center;column-gap:14px;padding:20px;}.contact-topics .content-card .card-icon{grid-row:1/3;width:46px;height:46px;}.contact-topics .content-card h3,.contact-topics .content-card p{text-align:left;}.contact-topics .content-card p{font-size:.84rem;}
.legal-shell{max-width:920px;margin-left:auto;margin-right:auto;display:grid;gap:20px;}
.legal-summary{padding:28px 30px;display:flex;gap:20px;align-items:center;background:linear-gradient(135deg,rgba(104,88,232,.08),rgba(15,148,136,.06)),#fff;}
.summary-icon{width:58px;height:58px;flex:0 0 58px;display:flex;align-items:center;justify-content:center;border-radius:18px;background:#fff;border:1px solid var(--line);font-size:1.55rem;box-shadow:0 10px 24px rgba(47,51,91,.07);}
.legal-summary h2{text-align:left;font-size:1.4rem;margin-bottom:5px;}.legal-summary p{color:var(--paper-dim);line-height:1.7;}
.legal-content{max-width:none;padding:34px 40px;}
.legal-content h2{text-align:left;padding-top:4px;font-size:1.27rem;position:relative;padding-left:18px;}
.legal-content h2::before{content:"";position:absolute;left:0;top:10px;width:5px;height:22px;border-radius:999px;background:linear-gradient(var(--glass-violet),var(--teal));}
.legal-content p{line-height:1.8;}
.category-card,.combo-card,.blog-card{box-shadow:0 9px 24px rgba(35,40,78,.07);}
.category-card:hover,.combo-card:hover,.blog-card:hover{transform:translateY(-4px);box-shadow:0 18px 34px rgba(71,61,150,.13);}
.prose:not(.legal-content){padding:30px 34px;border-radius:24px;background:rgba(255,255,255,.88);border:1px solid var(--line);box-shadow:0 12px 30px rgba(43,47,84,.06);}
.prose:not(.legal-content) h2{text-align:left;}
.site-footer{background:linear-gradient(180deg,rgba(249,250,254,.92),rgba(255,255,255,.98));}
.footer-col a{transition:color .2s ease,transform .2s ease;display:inline-block;}.footer-col a:hover{transform:translateX(2px);}
@media (max-width:900px){
  .split-feature,.values-layout,.contact-layout{grid-template-columns:1fr;}
  .mission-visual{min-height:270px;}
  .values-copy{padding-right:0;}
  .info-callout{grid-template-columns:1fr;text-align:center;gap:12px;}
  .info-callout .eyebrow,.info-callout h2{text-align:center;justify-content:center;}
  .cta-panel{flex-direction:column;text-align:center;}.cta-panel .eyebrow,.cta-panel h2{text-align:center;justify-content:center;}.cta-actions{justify-content:center;}
}
@media (max-width:760px){
  .steps-grid{grid-template-columns:1fr;}
  .page-hero{margin-top:12px;padding:46px 24px 34px;border-radius:24px;}
  .split-feature{padding:27px 22px;gap:25px;}
  .mission-visual{min-height:240px;}.mission-emoji{font-size:5.5rem;}
  .cta-panel,.info-callout,.contact-primary,.legal-content{padding:26px 22px;}
  .legal-summary{align-items:flex-start;padding:23px 21px;}.summary-icon{width:48px;height:48px;flex-basis:48px;border-radius:14px;}
  .prose:not(.legal-content){padding:25px 21px;}
}
@media (max-width:520px){
  .hero-badges span{font-size:.72rem;}
  .mission-visual{min-height:220px;}.orbit-chip{font-size:.68rem;padding:6px 9px;}
  .contact-topics .content-card{grid-template-columns:1fr;text-align:center;}.contact-topics .content-card .card-icon{grid-row:auto;margin:auto;}.contact-topics .content-card h3,.contact-topics .content-card p{text-align:center;}
  .legal-summary{display:block;text-align:center;}.summary-icon{margin:0 auto 13px;}.legal-summary h2{text-align:center;}
  .cta-actions{width:100%;}.cta-actions .btn{width:100%;}
}