/* =====================================================================
   زخرفة أسماء — zakhraafatasma.com
   Single shared stylesheet for every page. Sections:
   1. Variables (design system)   2. Base / reset
   3. Layout / utilities          4. Components
   5. Page sections               6. Responsive
   ===================================================================== */

/* ============ 1. VARIABLES ============ */
:root{
  /* palette */
  --ink:#14151C; --cloud:#EEF0F4; --gold:#C9962E; --rose:#B23A48; --slate:#6B7280;
  --bg:#EEF0F4; --surface:#FFFFFF; --surface-2:#F6F7FA; --text:#14151C;
  --muted:#4F5766; --border:rgba(20,21,28,.12); --hair:rgba(20,21,28,.09);
  /* stronger border for interactive controls — WCAG 1.4.11 non-text contrast */
  --border-strong:rgba(20,21,28,.34);
  --emerald:#0B6353; --gold-text:#8A6414;
  --shadow:0 1px 2px rgba(20,21,28,.05),0 8px 24px rgba(20,21,28,.06);
  /* spacing scale — only these values allowed */
  --s-4:4px; --s-8:8px; --s-10:10px; --s-12:12px; --s-14:14px; --s-16:16px;
  --s-24:24px; --s-32:32px; --s-48:48px; --s-64:64px; --s-96:96px;
  /* radii */
  --r-8:8px; --r-10:10px; --r-12:12px; --r-14:14px; --r-16:16px; --r-22:22px; --r-pill:999px;
  /* typography */
  --f-head:'Cairo','Segoe UI',Tahoma,sans-serif;
  --f-body:'IBM Plex Sans Arabic','Segoe UI',Tahoma,system-ui,sans-serif;
  --f-mono:ui-monospace,'Cascadia Mono','Segoe UI Mono','DejaVu Sans Mono',monospace;
  --container:1200px;
}
:root[data-theme="dark"]{
  --bg:#14151C; --surface:#1B1D27; --surface-2:#22242F; --text:#EEF0F4;
  --muted:#A3A9B5; --border:rgba(255,255,255,.13); --hair:rgba(255,255,255,.08);
  --border-strong:rgba(255,255,255,.34);
  --emerald:#3FDFB0; --gold-text:#E4B657;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 12px 32px rgba(0,0,0,.35);
}

/* ============ 2. BASE / RESET ============ */
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg); color:var(--text);
  font-family:var(--f-body); font-size:16px; line-height:1.7;
  min-height:100vh; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:var(--emerald); text-decoration:none;}
a:hover{color:var(--gold-text); text-decoration:underline;}
img{max-width:100%; height:auto;}
::selection{background:var(--gold); color:#14151C;}
:where(a,button,input,select,summary,[tabindex]):focus-visible{
  outline:3px solid var(--gold); outline-offset:2px; border-radius:6px;
}
h1,h2,h3,h4{font-family:var(--f-head); margin:0; line-height:1.35;}
p{margin:0 0 var(--s-16);}
@keyframes sngFade{0%{opacity:0;transform:translateY(6px);}12%{opacity:1;transform:none;}88%{opacity:1;transform:none;}100%{opacity:0;transform:translateY(-6px);}}
@keyframes sngTicker{0%{transform:translateX(0);}100%{transform:translateX(-50%);}}
@keyframes sngPop{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;}
}
[dir="rtl"] .ticker-anim{animation-direction:reverse;}
[hidden]{display:none !important;}

/* ============ 3. LAYOUT / UTILITIES ============ */
.container{max-width:var(--container); margin-inline:auto; padding-inline:var(--s-24);}
.section{max-width:var(--container); margin-inline:auto; padding:var(--s-32) var(--s-24);}
.section.narrow{max-width:820px;}
.cv-auto{content-visibility:auto; contain-intrinsic-size:auto 600px;}
.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;
}
.eyebrow{
  display:block; font-family:var(--f-head); font-weight:700; font-size:12.5px;
  letter-spacing:.14em; color:var(--gold-text); margin-bottom:var(--s-4);
}
.h2{font-family:var(--f-head); font-weight:900; font-size:clamp(24px,3.2vw,32px); line-height:1.3; margin:0 0 var(--s-16);}
.h2-sm{
  font-family:var(--f-head); font-weight:700; font-size:15px; letter-spacing:.05em;
  color:var(--muted); margin:0 0 var(--s-16);
}
.lede{color:var(--muted); font-size:17px; max-width:72ch; margin:0 0 var(--s-24);}
.rich{max-width:72ch;}
.rich p{color:var(--text); font-size:16.5px; line-height:1.9; margin:0 0 var(--s-16);}
.rich h3{font-family:var(--f-head); font-weight:700; font-size:20px; margin:var(--s-32) 0 var(--s-12);}
.rich ul,.rich ol{color:var(--text); font-size:16.5px; line-height:1.9; padding-inline-start:var(--s-24); margin:0 0 var(--s-16);}
.rich li{margin-bottom:var(--s-8);}
.rich strong{font-weight:600;}
.mono{font-family:var(--f-mono);}
.skip-link{
  position:absolute; inset-inline-start:12px; top:-56px; z-index:100;
  background:var(--gold); color:#14151C; padding:12px 20px; border-radius:var(--r-8);
  font-weight:700; font-family:var(--f-head); transition:top .2s;
}
.skip-link:focus{top:12px; color:#14151C; text-decoration:none;}

/* ============ 4. COMPONENTS ============ */
/* ---- Header + nav ---- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter:blur(14px); border-block-end:1px solid var(--hair);
}
.header-bar{
  max-width:var(--container); margin-inline:auto; padding:var(--s-10) var(--s-16);
  display:flex; align-items:center; gap:var(--s-8);
}
.brand{display:flex; align-items:center; gap:var(--s-10); flex-shrink:0;}
.brand:hover{text-decoration:none;}
.brand-mark{
  width:34px; height:34px; border-radius:9px;
  background:linear-gradient(135deg,var(--gold),#a97a1e);
  display:grid; place-items:center; box-shadow:0 2px 8px rgba(201,150,46,.4);
}
.brand-name{font-family:var(--f-head); font-weight:900; font-size:19px; color:var(--text);}
.brand-name .accent{color:var(--gold-text);}
.nav-primary{flex:1; min-width:0;}
.nav-list{display:none; gap:2px; list-style:none; margin:0; padding:0; justify-content:center; flex-wrap:nowrap;}
.nav-list li{flex-shrink:0;}
.nav-list a{
  padding:var(--s-8) var(--s-10); border-radius:var(--r-8); color:var(--text);
  font-weight:500; font-size:14px; display:block; white-space:nowrap;
}
.nav-list a:hover{color:var(--gold-text); background:var(--surface-2); text-decoration:none;}
.nav-list a[aria-current="page"]{color:var(--gold-text); font-weight:600;}
.header-actions{display:flex; align-items:center; gap:var(--s-8); flex-shrink:0;}
.icon-btn{
  display:grid; place-items:center; width:44px; height:44px;
  border:1px solid var(--border-strong); background:var(--surface); border-radius:var(--r-10);
  cursor:pointer; color:var(--text);
}
.icon-btn:hover{border-color:var(--gold); color:var(--gold-text);}

/* ---- Site search ---- */
.site-search{position:relative;}
.search-field{
  display:flex; align-items:center; gap:var(--s-8); background:var(--surface-2);
  border:1px solid var(--border-strong); border-radius:var(--r-10);
  padding:0 var(--s-12); height:44px; color:var(--muted);
}
.search-field:focus-within{border-color:var(--gold);}
.search-input{
  border:0; background:transparent; color:var(--text); font:inherit; font-size:14.5px;
  width:100%; min-width:0; outline:none; height:100%;
}
.search-desktop{display:none; width:210px; flex-shrink:0;}
.search-panel{padding:0 var(--s-16) var(--s-12);}
.search-results{
  position:absolute; inset-inline:0; top:calc(100% + 6px); z-index:60;
  list-style:none; margin:0; padding:var(--s-8); max-height:340px; overflow-y:auto;
  background:var(--surface); border:1px solid var(--border-strong);
  border-radius:var(--r-12); box-shadow:var(--shadow);
}
.search-panel .search-results{position:static; margin-top:var(--s-8);}
.search-results li a{
  display:block; padding:var(--s-10) var(--s-12); border-radius:var(--r-8); color:var(--text);
}
.search-results li a:hover,.search-results li[aria-selected="true"] a{
  background:var(--surface-2); color:var(--gold-text); text-decoration:none;
}
.search-results .r-title{display:block; font-weight:600; font-size:14.5px;}
.search-results .r-path{display:block; font-size:12.5px; color:var(--muted);}
.search-empty{padding:var(--s-12); color:var(--muted); font-size:14px;}

.nav-mobile{border-block-start:1px solid var(--hair); padding:var(--s-8) var(--s-16) var(--s-16); max-height:70vh; overflow-y:auto;}
.nav-mobile ul{list-style:none; margin:0; padding:0; display:grid; gap:2px;}
.nav-mobile a{display:block; padding:var(--s-12) var(--s-12); min-height:44px; border-radius:var(--r-10); color:var(--text); font-weight:600;}
.nav-mobile a:hover{background:var(--surface-2); text-decoration:none;}
.nav-mobile a[aria-current="page"]{color:var(--gold-text); background:var(--surface-2);}

/* ---- Breadcrumb ---- */
.breadcrumb{max-width:var(--container); margin-inline:auto; padding:var(--s-16) var(--s-24) 0;}
.breadcrumb ol{list-style:none; display:flex; flex-wrap:wrap; gap:var(--s-8); margin:0; padding:0; font-size:13.5px; color:var(--muted);}
.breadcrumb li{display:flex; gap:var(--s-8);}
.breadcrumb li+li::before{content:"/"; color:var(--muted);}
.breadcrumb a{color:var(--muted);}
.breadcrumb a:hover{color:var(--gold-text);}

/* ---- Buttons ---- */
.btn-gold{
  min-height:52px; padding-inline:var(--s-24); border:0; border-radius:var(--r-12);
  background:linear-gradient(135deg,var(--gold),#b5811f); color:#14151C;
  font-family:var(--f-head); font-weight:700; font-size:16px; cursor:pointer;
  box-shadow:0 6px 18px rgba(201,150,46,.35);
}
.btn-gold:hover{filter:brightness(1.06);}
.btn-outline{
  min-height:44px; padding-inline:var(--s-16); border:1px solid var(--border-strong);
  background:var(--surface); color:var(--text); border-radius:var(--r-10);
  cursor:pointer; font-family:var(--f-head); font-weight:600; font-size:14.5px;
}
.btn-outline:hover{border-color:var(--gold); color:var(--gold-text);}
.btn-ghost{
  min-height:44px; padding-inline:var(--s-16); border:1px solid rgba(255,255,255,.4);
  background:transparent; color:#E4E7EC; border-radius:var(--r-10); cursor:pointer;
  font-size:13.5px; font-weight:600;
}
.btn-ghost:hover{border-color:var(--gold); color:var(--gold);}

/* ---- Cards ---- */
.card-grid{display:grid; gap:var(--s-14); grid-template-columns:repeat(auto-fill,minmax(240px,1fr));}
.card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-16);
  padding:var(--s-24); box-shadow:var(--shadow); color:var(--text); display:block;
}
a.card:hover{border-color:var(--gold); text-decoration:none;}
.card-icon{
  display:grid; place-items:center; width:44px; height:44px; border-radius:var(--r-12);
  background:rgba(201,150,46,.16); color:var(--gold-text); margin-bottom:var(--s-14);
}
.card h3{font-family:var(--f-head); font-weight:700; font-size:17.5px; margin:0;}
.card p{font-size:14.5px; color:var(--muted); margin:var(--s-8) 0 0; line-height:1.75;}

/* ---- Tool cards ---- */
.tool-grid{display:grid; gap:var(--s-12); grid-template-columns:repeat(auto-fill,minmax(240px,1fr));}
.tool-card{
  display:grid; grid-template-columns:auto 1fr; align-items:center; gap:var(--s-4) var(--s-12);
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-14);
  padding:var(--s-16); color:var(--text); min-height:64px;
}
.tool-card:hover{border-color:var(--gold); text-decoration:none;}
.tool-card .glyph{grid-row:span 2; font-family:var(--f-mono); font-weight:600; color:var(--gold-text); font-size:18px;}
.tool-card .tool-name{font-weight:600; font-size:15px;}
.tool-card .tool-desc{font-size:13px; color:var(--muted); line-height:1.6;}

.hub-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-16);
  padding:var(--s-24); color:var(--text); box-shadow:var(--shadow); display:block;
}
.hub-card:hover{border-color:var(--gold); text-decoration:none;}
.hub-card .title{font-family:var(--f-head); font-weight:900; font-size:17px;}
.hub-card .sample{margin-top:var(--s-12); font-family:var(--f-mono); font-size:15px; color:var(--muted);}
.badge{font-size:11.5px; font-weight:700; color:#fff; background:var(--rose); padding:3px var(--s-8); border-radius:var(--r-pill);}

/* ---- Pills ---- */
.pill-list{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:var(--s-8);}
.pill{
  display:inline-flex; align-items:center; min-height:44px; padding:0 var(--s-16);
  border:1px solid var(--border-strong); background:var(--surface); border-radius:var(--r-pill);
  color:var(--text); font-weight:500; font-size:14.5px;
}
.pill:hover{border-color:var(--gold); color:var(--gold-text); text-decoration:none;}

/* ---- Numbered steps (HowTo) ---- */
.steps{list-style:none; margin:0; padding:0; display:grid; gap:var(--s-12); grid-template-columns:repeat(auto-fill,minmax(280px,1fr));}
.step{
  display:flex; gap:var(--s-14); align-items:flex-start; background:var(--surface);
  border:1px solid var(--border); border-radius:var(--r-16); padding:var(--s-16) var(--s-16) var(--s-12);
  box-shadow:var(--shadow);
}
.step-num{
  flex-shrink:0; display:grid; place-items:center; width:34px; height:34px; border-radius:var(--r-pill);
  background:rgba(201,150,46,.18); color:var(--gold-text); font-family:var(--f-head); font-weight:900; font-size:16px;
}
.step h3{font-family:var(--f-head); font-weight:700; font-size:16.5px; margin:4px 0 0;}
.step p{font-size:14.5px; color:var(--muted); margin:var(--s-4) 0 0; line-height:1.75;}

/* ---- Styles table ---- */
.table-wrap{overflow-x:auto; border:1px solid var(--border); border-radius:var(--r-16); background:var(--surface);}
.styles-table{width:100%; border-collapse:collapse; font-size:15px; min-width:520px;}
.styles-table th,.styles-table td{padding:var(--s-12) var(--s-16); text-align:start; border-block-end:1px solid var(--hair); vertical-align:middle;}
.styles-table thead th{font-family:var(--f-head); font-weight:700; font-size:14px; color:var(--muted); background:var(--surface-2); white-space:nowrap;}
.styles-table tbody th{font-weight:600; white-space:nowrap;}
.styles-table tbody tr:last-child th,.styles-table tbody tr:last-child td{border-block-end:0;}
.sample-cell{font-family:var(--f-mono); font-size:17px; white-space:nowrap;}
.styles-table td:last-child{color:var(--muted); font-size:14px; line-height:1.7;}

/* ---- Check / cross lists ---- */
.check-list{list-style:none; margin:0; padding:0; display:grid; gap:var(--s-10); max-width:72ch;}
.chk{display:flex; gap:var(--s-12); align-items:flex-start; font-size:16px; line-height:1.8; color:var(--text);}
.chk > span:first-child{
  flex-shrink:0; width:24px; height:24px; margin-top:4px; border-radius:var(--r-pill);
  display:grid; place-items:center; font-weight:700; font-size:14px;
}
.chk-good > span:first-child{background:rgba(11,99,83,.15); color:var(--emerald);}
.chk-good > span:first-child::before{content:"✓";}
.chk-bad > span:first-child{background:rgba(178,58,72,.15); color:var(--rose);}
.chk-bad > span:first-child::before{content:"✕";}
:root[data-theme="dark"] .chk-bad > span:first-child{color:#F08A96;}

/* ---- FAQ ---- */
.faq-list{display:grid; gap:var(--s-8);}
.faq-item{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-14); overflow:hidden;}
.faq-h{margin:0; font-size:inherit; font-weight:inherit;}
.faq-q{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:var(--s-12);
  padding:var(--s-16) var(--s-24); min-height:56px; background:transparent; border:0; cursor:pointer;
  color:var(--text); font-family:var(--f-head); font-weight:700; font-size:16.5px; text-align:start; line-height:1.6;
}
.faq-q:hover{color:var(--gold-text);}
.faq-icon{flex-shrink:0; color:var(--gold-text); font-size:24px; line-height:1; transition:transform .25s;}
.faq-q[aria-expanded="true"] .faq-icon{transform:rotate(45deg);}
.faq-a{padding:0 var(--s-24) var(--s-16);}
.faq-a p{color:var(--muted); font-size:15.5px; line-height:1.85; margin:0;}

/* ---- Footer ---- */
.site-footer{background:#0E0F16; color:#D5D9E0; border-block-start:1px solid rgba(255,255,255,.08);}
.footer-grid{
  max-width:var(--container); margin-inline:auto; padding:var(--s-48) var(--s-24) var(--s-24);
  display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:var(--s-32);
}
.footer-brand{grid-column:1/-1; max-width:320px;}
.footer-brand .row{display:flex; align-items:center; gap:var(--s-10);}
.footer-brand .mark{width:30px; height:30px; border-radius:var(--r-8); background:linear-gradient(135deg,var(--gold),#a97a1e); display:grid; place-items:center;}
.footer-brand .name{font-family:var(--f-head); font-weight:900; font-size:17px; color:#EEF0F4;}
.footer-brand .name .accent{color:var(--gold);}
.footer-brand p{font-size:14px; margin:var(--s-12) 0 0; color:#A7ADBA; line-height:1.8;}
.footer-col h2{font-family:var(--f-head); font-weight:700; font-size:13.5px; letter-spacing:.05em; color:#EEF0F4; margin:0 0 var(--s-12);}
.footer-col ul{list-style:none; margin:0; padding:0; display:grid; gap:var(--s-4); font-size:14.5px;}
.footer-col a{color:#D5D9E0; display:inline-flex; align-items:center; min-height:32px;}
.footer-col a:hover{color:var(--gold);}
.footer-bar{border-block-start:1px solid rgba(255,255,255,.08);}
.footer-bar .row{
  max-width:var(--container); margin-inline:auto; padding:var(--s-16) var(--s-24);
  display:flex; flex-wrap:wrap; gap:var(--s-14); align-items:center; justify-content:space-between;
}
.footer-bar .copy{font-size:13.5px; color:#A7ADBA;}
.footer-bar .btns{display:flex; gap:var(--s-8);}

/* ---- Author / trust block ---- */
.trust{
  display:flex; gap:var(--s-16); align-items:flex-start; background:var(--surface);
  border:1px solid var(--border); border-radius:var(--r-16); padding:var(--s-24); box-shadow:var(--shadow);
}
.trust .avatar{
  width:52px; height:52px; border-radius:var(--r-pill); flex-shrink:0;
  background:linear-gradient(135deg,var(--gold),#a97a1e); display:grid; place-items:center;
  font-family:var(--f-head); font-weight:900; color:#14151C; font-size:20px;
}
.trust h3{font-family:var(--f-head); font-weight:700; font-size:17px; margin:0 0 var(--s-4);}
.trust p{font-size:14.5px; color:var(--muted); margin:0; line-height:1.85;}

/* ---- Toast (copy confirmation) ---- */
.toast{
  position:fixed; inset-inline:0; bottom:24px; margin-inline:auto; width:max-content; max-width:90vw;
  z-index:200; background:var(--ink); color:#EEF0F4; padding:var(--s-12) var(--s-24);
  border-radius:var(--r-pill); font-weight:600; font-size:14.5px; box-shadow:0 12px 32px rgba(0,0,0,.35);
  border:1px solid rgba(201,150,46,.5); animation:sngPop .18s ease both;
}
:root[data-theme="dark"] .toast{background:#2A2D3A;}

/* ---- Decorative lattice divider ---- */
.lattice{max-width:var(--container); margin-inline:auto; padding:0 var(--s-24);}
.lattice svg{display:block;}

/* ============ 5. PAGE SECTIONS ============ */
/* ---- Hero ---- */
.hero{position:relative; overflow:hidden; background:radial-gradient(120% 90% at 85% 0%,#20222E 0%,#14151C 55%); color:#EEF0F4;}
.hero-dots{position:absolute; inset:0; opacity:.5; background-image:radial-gradient(circle at 1px 1px, rgba(201,150,46,.16) 1px, transparent 0); background-size:26px 26px;}
.hero-grid{
  position:relative; max-width:var(--container); margin-inline:auto;
  padding:var(--s-48) var(--s-24); display:grid; grid-template-columns:1fr;
  gap:var(--s-32); align-items:center;
}
.hero-eyebrow{display:inline-flex; align-items:center; gap:var(--s-8); font-family:var(--f-head); font-weight:700; font-size:12.5px; letter-spacing:.14em; color:var(--gold);}
.hero-eyebrow .bar{width:22px; height:1px; background:var(--gold);}
/* Arabic needs generous leading — 1.04 clipped the descenders and made the
   two headline lines look like they overlapped. */
.hero h1{font-family:var(--f-head); font-weight:900; font-size:clamp(30px,4.6vw,50px); line-height:1.28; margin:var(--s-12) 0 0;}
.hero-sub{font-size:clamp(16px,1.6vw,18.5px); color:#D5D9E0; max-width:52ch; margin:var(--s-16) 0 0; line-height:1.8;}
.hero-panel{margin-top:var(--s-24); background:rgba(238,240,244,.06); border:1px solid rgba(238,240,244,.18); border-radius:18px; padding:var(--s-16); box-shadow:0 18px 50px rgba(0,0,0,.35);}
.hero-input-row{display:flex; gap:var(--s-10); flex-wrap:wrap;}
.hero-input{
  flex:1; min-width:190px; height:52px; padding-inline:var(--s-16); border-radius:var(--r-12);
  border:1px solid rgba(238,240,244,.42); background:#0F1017; color:#EEF0F4;
  font:inherit; font-size:17px; outline:none;
}
.hero-input::placeholder{color:#9BA1AE;}
.hero-input:focus{border-color:var(--gold);}
.hero-kbd{margin:var(--s-12) 2px 0; font-size:13px; color:#B4BAC6;}
.hero-preview{position:relative;}
.hero-preview .box{position:relative; background:linear-gradient(160deg,#1C1E2A,#111219); border:1px solid rgba(201,150,46,.32); border-radius:var(--r-22); padding:var(--s-24); overflow:hidden;}
.hero-preview .glow{position:absolute; inset:0; background-image:radial-gradient(circle at 0 0, rgba(63,223,176,.09), transparent 40%);}
.hero-preview .label{position:relative; font-family:var(--f-head); font-size:12px; letter-spacing:.16em; color:var(--gold); margin:0 0 var(--s-12);}
.hero-preview .list{position:relative; list-style:none; margin:0; padding:0; display:grid; gap:var(--s-10);}
.hero-preview .list li{display:flex; align-items:center; gap:var(--s-10); font-family:var(--f-mono); font-size:17px; color:#D5D9E0; min-height:32px;}
.hero-preview .dot{width:7px; height:7px; border-radius:50%; flex-shrink:0;}
.hero-caption{text-align:center; font-size:13px; color:#B4BAC6; margin:var(--s-12) 0 0;}

/* ---- Generator results (full width, no nested scrolling) ---- */
.results-section{padding-block:var(--s-32) var(--s-24);}
.results-head{display:flex; flex-wrap:wrap; gap:var(--s-12); align-items:center; justify-content:space-between; margin-bottom:var(--s-16);}
.results-head .h2{margin:0;}
.results-grid{display:grid; gap:var(--s-10); grid-template-columns:1fr;}
.result-row{
  display:flex; align-items:center; gap:var(--s-12); background:var(--surface);
  border:1px solid var(--border); border-radius:var(--r-12); padding:var(--s-10) var(--s-14); min-height:56px;
}
.result-row:hover{border-color:var(--gold);}
.result-row .txt{flex:1; min-width:0; font-family:var(--f-mono); font-size:18px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text);}
.result-row .style-name{flex-shrink:0; font-size:12px; color:var(--muted); display:none;}
.copy-btn{
  flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; gap:6px;
  min-height:44px; min-width:72px; padding-inline:var(--s-14); border:1px solid var(--border-strong);
  background:var(--surface-2); color:var(--text); border-radius:var(--r-10); cursor:pointer;
  font-size:14px; font-weight:600;
}
.copy-btn:hover{border-color:var(--gold); color:var(--gold-text);}
.copy-btn[data-copied="true"]{border-color:var(--emerald); color:var(--emerald);}
.results-note{color:var(--muted); font-size:14.5px; margin:var(--s-16) 0 0; max-width:72ch;}

/* ---- Trending / scroller ---- */
.scroller{list-style:none; margin:0; padding:0 0 var(--s-8); display:flex; gap:var(--s-12); overflow-x:auto; scroll-snap-type:x proximity;}
.scroller > li{scroll-snap-align:start; flex:0 0 auto;}
.trend-card{min-width:220px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-14); padding:var(--s-14) var(--s-16); box-shadow:var(--shadow);}
.trend-card .rank{font-family:var(--f-mono); font-size:13px; color:var(--gold-text);}
.trend-card .name{font-weight:600; margin-top:var(--s-4); font-family:var(--f-mono); font-size:17px;}
.trend-card .meta{font-size:13px; color:var(--muted); margin-top:2px;}

/* ---- Fonts / symbols / invisible showcase ---- */
.fsi-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); gap:var(--s-14);}
.fsi-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-16); padding:var(--s-24); box-shadow:var(--shadow);}
.fsi-card h3{font-family:var(--f-head); font-weight:700; font-size:18px; margin:0 0 var(--s-12);}
.fsi-card p{font-size:14.5px; color:var(--muted); margin:0 0 var(--s-12); line-height:1.75;}
.fsi-fonts{display:grid; gap:var(--s-8); font-family:var(--f-mono); font-size:19px;}
.fsi-fonts .muted{color:var(--muted);}
.fsi-symbols{display:flex; flex-wrap:wrap; gap:var(--s-10); font-size:22px; color:var(--text);}
.fsi-invisible-box{display:flex; align-items:center; gap:var(--s-10); background:var(--surface-2); border:1px dashed var(--border-strong); border-radius:var(--r-10); padding:var(--s-12);}
.fsi-invisible-box .code{flex:1; font-family:var(--f-mono); color:var(--muted); font-size:13.5px;}
.fsi-invisible-box .tag{font-size:12.5px; font-weight:700; color:var(--emerald);}
.fsi-card .more{font-weight:600; font-family:var(--f-head); font-size:14.5px;}

/* ---- Collections ---- */
.col-card{flex:0 0 265px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-16); padding:var(--s-24); box-shadow:var(--shadow);}
.col-card.feature{background:linear-gradient(160deg,#1C1E2A,#14151C); border:1px solid rgba(201,150,46,.35); color:#EEF0F4; box-shadow:none;}
.col-card .count{font-size:11.5px; font-weight:700; color:var(--gold-text); letter-spacing:.08em;}
.col-card.feature .count{color:var(--gold);}
.col-card h3{font-family:var(--f-head); font-weight:700; font-size:19px; margin:var(--s-8) 0 var(--s-10);}
.col-card .sample{font-family:var(--f-mono); font-size:16px; color:var(--muted);}
.col-card.feature .sample{color:#D5D9E0;}

/* ---- Ticker ---- */
.ticker-wrap{overflow:hidden; border:1px solid var(--border); border-radius:var(--r-12); background:var(--surface);}
.ticker-anim{display:flex; gap:34px; white-space:nowrap; padding:var(--s-14) var(--s-24); font-size:14.5px; color:var(--muted); animation:sngTicker 34s linear infinite; width:max-content;}

/* ---- Bands ---- */
.band{background:var(--surface-2); border-block:1px solid var(--hair);}
.band .section{max-width:var(--container);}

/* ---- About teaser ---- */
.about{max-width:760px; margin-inline:auto; padding:var(--s-24) var(--s-24) var(--s-32); text-align:center;}
.about h2{font-family:var(--f-head); font-weight:900; font-size:clamp(22px,3vw,28px); margin:0 0 var(--s-12); line-height:1.35;}
.about p{color:var(--muted); font-size:16.5px; margin:0 0 var(--s-16); line-height:1.85;}
.about a{font-weight:700; font-family:var(--f-head);}

/* ---- Prose pages (privacy / terms / about / contact) ---- */
.prose{max-width:760px; margin-inline:auto; padding:var(--s-32) var(--s-24) var(--s-64);}
.prose h1{font-family:var(--f-head); font-weight:900; font-size:clamp(28px,4vw,40px); line-height:1.3; margin:0 0 var(--s-16);}
.prose h2{font-family:var(--f-head); font-weight:700; font-size:22px; margin:var(--s-32) 0 var(--s-12);}
.prose h3{font-family:var(--f-head); font-weight:700; font-size:18px; margin:var(--s-24) 0 var(--s-8);}
.prose p,.prose li{color:var(--text); font-size:16.5px; line-height:1.9;}
.prose ul,.prose ol{padding-inline-start:var(--s-24);}
.prose li{margin-bottom:var(--s-8);}
.prose .updated{color:var(--muted); font-size:14px; margin-bottom:var(--s-24);}

/* ---- Contact methods (no form — the site has no backend) ---- */
.contact-methods{display:grid; gap:var(--s-14); grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); margin:var(--s-24) 0;}
.contact-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-16); padding:var(--s-24); box-shadow:var(--shadow);}
.contact-card h3{font-family:var(--f-head); font-weight:700; font-size:17px; margin:0 0 var(--s-8);}
.contact-card p{font-size:14.5px; color:var(--muted); margin:0 0 var(--s-12); line-height:1.75;}
.contact-card .val{font-family:var(--f-mono); font-size:15px; word-break:break-all;}

/* ---- 404 ---- */
.notfound{max-width:640px; margin-inline:auto; padding:var(--s-64) var(--s-24); text-align:center;}
.notfound .code{font-family:var(--f-mono); font-size:clamp(64px,14vw,120px); font-weight:600; color:var(--gold-text); line-height:1;}
.notfound h1{font-family:var(--f-head); font-weight:900; font-size:clamp(24px,4vw,34px); line-height:1.3; margin:var(--s-16) 0 var(--s-12);}
.notfound p{color:var(--muted); font-size:16.5px; margin:0 0 var(--s-24);}

/* ============ 6. RESPONSIVE ============ */
@media (min-width:600px){
  .results-grid{grid-template-columns:repeat(2,1fr);}
}
@media (min-width:1000px){
  .nav-list{display:flex;}
  .hamburger,.search-mobile-btn{display:none;}
  .hero-grid{grid-template-columns:1.08fr .92fr; gap:var(--s-48); padding-block:var(--s-64);}
  .results-grid{grid-template-columns:repeat(2,1fr);}
  .result-row .style-name{display:block;}
}
@media (min-width:1180px){
  .search-desktop{display:block;}
}
@media (max-width:768px){
  body{font-size:15.5px;}
  .section{padding:var(--s-24) var(--s-16);}
  .container,.breadcrumb,.lattice{padding-inline:var(--s-16);}
  .hero-grid{padding:var(--s-32) var(--s-16);}
  .footer-grid{padding:var(--s-32) var(--s-16) var(--s-24);}
  .footer-bar .row{padding:var(--s-16);}
  .rich p,.rich li{font-size:16px;}
  .btn-gold{width:100%;}
}