/* =============================================================
   MANZARI — Premium Editorial Light Theme
   Fonts: Playfair Display (display) + Plus Jakarta Sans (body)
   Palette: Warm cream · Charcoal ink · Terracotta accent
============================================================= */
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }

:root {
  --cream:   #faf8f3;
  --cream2:  #f3f0e8;
  --cream3:  #ede9df;
  --white:   #ffffff;
  --ink:     #1c1a16;
  --ink2:    #4a4540;
  --ink3:    #8a837a;
  --ink4:    #bab4ac;
  --terra:   #d4541a;
  --terra2:  #b84414;
  --saf:     #e8960c;
  --sage:    #3a7d64;
  --slate:   #3b5470;
  --bd:      rgba(28,26,22,0.10);
  --bd2:     rgba(28,26,22,0.06);
  --bdh:     rgba(212,84,26,0.4);
  --r1:5px; --r2:10px; --r3:16px; --r4:22px;
  --sh-card: 0 1px 0 rgba(28,26,22,.06), 0 4px 16px rgba(28,26,22,.07);
  --sh-hover: 0 2px 0 rgba(28,26,22,.08), 0 12px 32px rgba(28,26,22,.12);
  --sh-btn:  0 1px 0 rgba(180,60,16,.4), 0 4px 14px rgba(212,84,26,.28);
  --fd: 'Playfair Display', Georgia, serif;
  --fb: 'Plus Jakarta Sans', sans-serif;
  --sp:  clamp(64px,8vw,100px);
  --cw:  1220px;
}

html { scroll-behavior:smooth; }

body {
  font-family: var(--fb);
  background: var(--cream);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.wrap {
  max-width: var(--cw);
  margin-inline: auto;
  padding-inline: clamp(18px,4.5vw,48px);
}

body::before {
  content:'';
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E");
  opacity: 0.5;
}

.gt {
  background: linear-gradient(120deg, var(--terra) 0%, var(--saf) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.slbl {
  font-family: var(--fb);
  font-size: 10.5px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--terra); margin-bottom: 10px;
}

.sttl {
  font-family: var(--fd);
  font-size: clamp(24px,3.2vw,36px); font-weight: 800;
  line-height: 1.15; color: var(--ink); margin-bottom: 14px;
}

.ssub {
  font-size: 15.5px; color: var(--ink2);
  max-width: 500px; line-height: 1.72; font-weight: 400;
}

.shd { margin-bottom: clamp(36px,5.5vw,56px); }

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 24px; border-radius: var(--r2);
  font-family: var(--fb); font-size: 14.5px; font-weight: 600;
  text-decoration: none; cursor: pointer; border: none;
  transition: all .18s ease; white-space: nowrap;
}
.btn-p { background: var(--terra); color: #fff; box-shadow: var(--sh-btn); }
.btn-p:hover {
  background: var(--terra2);
  box-shadow: 0 2px 0 rgba(180,60,16,.35), 0 8px 24px rgba(212,84,26,.38);
  transform: translateY(-1px);
}
.btn-o { background: var(--white); color: var(--ink); border: 1.5px solid var(--bd) !important; box-shadow: var(--sh-card); }
.btn-o:hover { border-color: var(--bd) !important; box-shadow: var(--sh-hover); transform: translateY(-1px); }

.pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 13px; border-radius: 999px;
  border: 1.5px solid rgba(212,84,26,.25);
  background: rgba(212,84,26,.07);
  font-size: 11px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--terra);
}
.dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--terra); flex-shrink: 0;
  animation: blink 2.2s ease infinite;
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.25} }

.rv { opacity:0; transform:translateY(20px); transition:opacity .5s ease, transform .5s ease; }
.rv.on { opacity:1; transform:translateY(0); }
.d1{transition-delay:.06s} .d2{transition-delay:.13s} .d3{transition-delay:.20s}
.d4{transition-delay:.27s} .d5{transition-delay:.34s} .d6{transition-delay:.41s}

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

/* NAV */
.nav {
  position: fixed; top:0; left:0; right:0; z-index:200;
  height: 62px; display: flex; align-items: center; justify-content: space-between;
  padding-inline: clamp(18px,4.5vw,48px);
  background: rgba(250,248,243,.92);
  backdrop-filter: blur(16px) saturate(1.6);
  -webkit-backdrop-filter: blur(16px) saturate(1.6);
  border-bottom: 1px solid var(--bd);
  transition: box-shadow .2s, background .2s;
}
.nav.sc { background: rgba(250,248,243,.98); box-shadow: 0 1px 0 var(--bd), 0 4px 16px rgba(28,26,22,.06); }
.nav-logo { font-family: var(--fd); font-size: 21px; font-weight: 900; color: var(--ink); text-decoration: none; letter-spacing: -.02em; }
.nav-logo em { font-style: normal; color: var(--terra); }
.nav-logo { display: flex; align-items: center; gap: 10px; }
.nav-logo-icon { width: 28px; height: 28px; border-radius: 50%; }
.nav-links { display:flex; gap:2px; list-style:none; align-items:center; }
.nav-links a { display:block; padding:6px 13px; border-radius:var(--r1); font-size:14px; font-weight:500; color:var(--ink2); text-decoration:none; transition:color .15s, background .15s; }
.nav-links a:hover { color:var(--ink); background:rgba(28,26,22,.05); }
.nav-end  { display:flex; align-items:center; gap:10px; }
.nav-ham  { display:none; flex-direction:column; gap:5px; cursor:pointer; padding:4px; }
.nav-ham span { display:block; width:22px; height:2px; background:var(--ink2); border-radius:2px; }

/* HERO */
.hero {
  min-height: 100vh; padding-top: 62px;
  display: flex; align-items: center;
  position: relative; overflow: hidden;
  background: var(--cream);
}
.hero-rules {
  position: absolute; inset:0; z-index:0; pointer-events:none;
  background-image: linear-gradient(rgba(28,26,22,.04) 1px, transparent 1px);
  background-size: 100% 72px;
  mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.5) 30%, rgba(0,0,0,0.5) 70%, transparent 100%);
}
.hero-circle {
  position: absolute; width: 600px; height: 600px; border-radius: 50%;
  border: 1px solid rgba(212,84,26,.12); top: 50%; right: -80px;
  transform: translateY(-50%); pointer-events: none; z-index: 0;
}
.hero-circle::before { content:''; position:absolute; inset:40px; border-radius:50%; border: 1px solid rgba(212,84,26,.08); }
.hero-circle::after  { content:''; position:absolute; inset:100px; border-radius:50%; border: 1px solid rgba(212,84,26,.05); }
.hero-blob {
  position: absolute; z-index:0; pointer-events:none;
  width: 500px; height: 400px; top: -60px; right: 5%;
  background: radial-gradient(ellipse, rgba(232,150,12,.12) 0%, rgba(212,84,26,.06) 50%, transparent 75%);
  filter: blur(60px);
}
.hero-inner {
  position: relative; z-index:1;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 56px; align-items: center;
  padding: clamp(60px,8vw,100px) 0; width: 100%;
}
.hh-ey  { opacity:0; animation:fup .7s ease .08s forwards; margin-bottom:24px; }
.hh-h1  { opacity:0; animation:fup .7s ease .20s forwards; margin-bottom:20px; }
.hh-sub { opacity:0; animation:fup .7s ease .32s forwards; margin-bottom:36px; }
.hh-cta { opacity:0; animation:fup .7s ease .44s forwards; margin-bottom:40px; display:flex; flex-wrap:wrap; gap:12px; }
.hh-tr  { opacity:0; animation:fup .7s ease .56s forwards; }
.hh-r   { opacity:0; animation:fup .8s ease .48s forwards; }
@keyframes fup { from{opacity:0;transform:translateY(18px)} to{opacity:1;transform:translateY(0)} }
.hh-h1 h1 { font-family: var(--fd); font-size: clamp(40px,5.6vw,68px); font-weight: 900; line-height: 1.04; letter-spacing: -.02em; color: var(--ink); }
.hh-sub p { font-size: clamp(15px,1.6vw,17px); color: var(--ink2); line-height: 1.76; font-weight: 400; max-width: 490px; }
.tr-row { display:flex; flex-wrap:wrap; align-items:center; gap:18px; }
.tr-item { display:flex; align-items:center; gap:7px; font-size:12.5px; color:var(--ink3); font-weight:500; }
.tr-sep  { width:1px; height:14px; background:var(--bd); }

.hcard-wrap { position:relative; }
.hcard { background: var(--white); border: 1px solid var(--bd); border-radius: var(--r4); overflow: hidden; box-shadow: 0 2px 0 rgba(28,26,22,.06), 0 20px 60px rgba(28,26,22,.12); }
.hcard-bar { background: var(--cream); border-bottom: 1px solid var(--bd); padding: 12px 16px; display: flex; align-items: center; gap: 10px; }
.hcard-dots { display:flex; gap:6px; }
.hcard-dots i { display:block; width:10px; height:10px; border-radius:50%; font-style:normal; }
.hcard-dots i:nth-child(1){background:#ff5f57;}
.hcard-dots i:nth-child(2){background:#febc2e;}
.hcard-dots i:nth-child(3){background:#28c840;}
.hcard-url { font-size:11px; color:var(--ink3); margin-left:8px; padding:3px 10px; border-radius:5px; background:rgba(28,26,22,.06); font-weight:600; font-family:monospace; letter-spacing:.02em; }
.hcard-body { padding:18px 16px; display:flex; flex-direction:column; gap:14px; }
.hcstats { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.hcs { background: var(--cream); border: 1px solid var(--bd); border-radius: var(--r2); padding:12px; text-align:center; }
.hcs-n { font-family:var(--fd); font-size:18px; font-weight:800; margin-bottom:2px; color: var(--ink); }
.hcs-n em { font-style:normal; color:var(--terra); }
.hcs-l { font-size:10.5px; color:var(--ink3); font-weight:500; }
.chart-lbl { font-size:10.5px; font-weight:700; color:var(--ink3); margin-bottom:8px; letter-spacing:.07em; text-transform:uppercase; }
.bars { display:flex; align-items:flex-end; gap:4px; height:54px; }
.bar  { flex:1; border-radius:3px 3px 0 0; background:rgba(212,84,26,.15); min-height:4px; }
.bar.hi { background:linear-gradient(to top, var(--terra), var(--saf)); }
.hclist { display:flex; flex-direction:column; gap:7px; }
.hcrow { display:flex; align-items:center; gap:10px; padding:9px 11px; background: var(--cream); border: 1px solid var(--bd); border-radius: 8px; }
.hcico { width:28px; height:28px; border-radius:7px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.hcname { font-size:12px; font-weight:600; color:var(--ink); }
.hcsub  { font-size:10.5px; color:var(--ink3); }
.hcbadge { font-size:10.5px; font-weight:700; padding:3px 8px; border-radius:999px; flex-shrink:0; }
.bg-a { background:rgba(58,125,100,.14); color:var(--sage); }
.bg-b { background:rgba(212,84,26,.12);  color:var(--terra); }
.bg-c { background:rgba(232,150,12,.14); color:#a06e00; }
.hfloat { position:absolute; top:-13px; right:-13px; background: var(--ink); color:#fff; font-size:11px; font-weight:700; padding:7px 13px; border-radius:999px; box-shadow:0 4px 16px rgba(28,26,22,.25); letter-spacing:.03em; }

/* STATS BAR */
.stats { background: var(--ink); border-top: none; }
.stats-grid { display: grid; grid-template-columns: repeat(4,1fr); }
.stat { padding: 38px 24px; text-align:center; display: flex; flex-direction:column; align-items:center; gap:10px; border-right: 1px solid rgba(255,255,255,.08); }
.stat:last-child { border-right:none; }
.stat-ico { width:40px; height:40px; border-radius:10px; display:flex; align-items:center; justify-content:center; }
.stat-n { font-family: var(--fd); font-size: clamp(28px,3.2vw,40px); font-weight: 900; line-height:1; color:#fff; }
.stat-n em { font-style:normal; color:var(--terra); }
.stat-l { font-size:13px; color:rgba(255,255,255,.45); font-weight:400; }

/* CATEGORIES */
.cats { padding:var(--sp) 0; }
.cat-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.cat-card { display:flex; align-items:flex-start; gap:16px; padding:24px; background:var(--white); border:1px solid var(--bd); border-radius:var(--r4); text-decoration:none; transition:all .18s ease; box-shadow: var(--sh-card); }
.cat-card:hover { border-color: var(--bdh); transform:translateY(-2px); box-shadow: var(--sh-hover); }
.cat-ico { width:44px; height:44px; flex-shrink:0; border-radius:var(--r2); display:flex; align-items:center; justify-content:center; }
.cat-name { font-family:var(--fd); font-size:15px; font-weight:700; color:var(--ink); margin-bottom:5px; }
.cat-desc { font-size:12.5px; color:var(--ink3); line-height:1.55; }
.cat-cnt  { font-size:11.5px; color:var(--terra); margin-top:8px; font-weight:600; }

/* TOOLS */
.tools { padding:var(--sp) 0; background: var(--cream2); border-top:1px solid var(--bd); border-bottom:1px solid var(--bd); }
.tools-hd { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-bottom:clamp(36px,5vw,54px); }
.tools-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.tool-card { background: var(--white); border: 1px solid var(--bd); border-radius:var(--r4); padding: 24px; display:flex; flex-direction:column; gap:14px; position:relative; overflow:hidden; box-shadow: var(--sh-card); transition: all .18s ease; }
.tool-card::before { content:''; position:absolute; bottom:0; left:0; right:0; height:3px; background: linear-gradient(90deg, var(--terra), var(--saf)); opacity:0; transition:opacity .25s; }
.tool-card:hover { transform:translateY(-3px); box-shadow:var(--sh-hover); border-color:var(--bd); }
.tool-card:hover::before { opacity:1; }
.tc-top { display:flex; align-items:center; justify-content:space-between; }
.tc-logo { width:44px; height:44px; border-radius:var(--r2); display:flex; align-items:center; justify-content:center; }
.tc-tag { font-size:9.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; padding:4px 9px; border-radius:999px; border:1px solid; }
.tt-top  { background:rgba(232,150,12,.12); color:#8a5c00; border-color:rgba(232,150,12,.3); }
.tt-best { background:rgba(58,125,100,.1);  color:var(--sage); border-color:rgba(58,125,100,.25); }
.tt-rec  { background:rgba(212,84,26,.1);   color:var(--terra); border-color:rgba(212,84,26,.25); }
.tt-spd  { background:rgba(59,84,112,.1);   color:var(--slate); border-color:rgba(59,84,112,.22); }
.tt-ed   { background:rgba(28,26,22,.07);   color:var(--ink2); border-color:rgba(28,26,22,.15); }
.tt-sec  { background:rgba(185,54,20,.1);   color:#9a3010; border-color:rgba(185,54,20,.22); }
.tc-name { font-family:var(--fd); font-size:16.5px; font-weight:800; color:var(--ink); }
.tc-desc { font-size:13px; color:var(--ink2); line-height:1.64; flex:1; }
.tc-stars { display:flex; align-items:center; gap:6px; }
.stars    { display:flex; gap:2px; }
.star     { color:var(--saf); font-size:13px; line-height:1; }
.star.dim { opacity:.28; }
.rs { font-size:13px; font-weight:700; color:var(--ink); }
.rc { font-size:11.5px; color:var(--ink3); }
.tc-ft { display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap; padding-top:13px; border-top:1px solid var(--bd); }
.tc-price { font-size:12.5px; color:var(--ink3); }
.tc-price strong { color:var(--ink); font-weight:700; }
.deal { display:inline-flex; align-items:center; gap:5px; padding:8px 16px; border-radius:var(--r1); font-size:12.5px; font-weight:700; background: var(--terra); color:#fff; text-decoration:none; box-shadow:0 2px 8px rgba(212,84,26,.3); transition:all .18s; }
.deal:hover { background:var(--terra2); box-shadow:0 4px 14px rgba(212,84,26,.4); transform:translateY(-1px); }

/* TUTORIALS */
.tuts { padding:var(--sp) 0; }
.tuts-hd { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-bottom:clamp(36px,5vw,54px); }
.tut-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.tut-card { background: var(--white); border: 1px solid var(--bd); border-radius:var(--r4); overflow:hidden; text-decoration:none; display:flex; flex-direction:column; box-shadow: var(--sh-card); transition: all .18s ease; }
.tut-card:hover { transform:translateY(-3px); box-shadow:var(--sh-hover); }
.tthumb { height:156px; position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; }
.th-wp   { background:linear-gradient(135deg,#e8f0fb 0%,#d0e2f8 100%); }
.th-el   { background:linear-gradient(135deg,#f0eafd 0%,#e2d4fb 100%); }
.th-seo  { background:linear-gradient(135deg,#e6f5ec 0%,#d0edda 100%); }
.th-woo  { background:linear-gradient(135deg,#f5eaf8 0%,#ead5f0 100%); }
.th-host { background:linear-gradient(135deg,#fef3e0 0%,#fde8c0 100%); }
.th-ai   { background:linear-gradient(135deg,#e8f5f8 0%,#d0edf5 100%); }
.th-art { position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.th-wp .th-art::before { content:''; position:absolute; top:18px; left:26px; right:26px; bottom:10px; border:1.5px solid rgba(59,84,176,.3); border-radius:8px; background:rgba(255,255,255,.6); }
.th-wp .th-art::after  { content:''; position:absolute; top:18px; left:26px; right:26px; height:22px; border-bottom:1.5px solid rgba(59,84,176,.25); background:rgba(59,84,176,.08); border-radius:8px 8px 0 0; }
.th-wp-lines { position:absolute; top:54px; left:42px; right:42px; display:flex; flex-direction:column; gap:7px; }
.th-wp-lines span { display:block; height:6px; border-radius:3px; background:rgba(59,84,176,.18); }
.th-wp-lines span:nth-child(1){ width:65%; }
.th-wp-lines span:nth-child(2){ width:82%; }
.th-wp-lines span:nth-child(3){ width:50%; }
.th-wp-lines span:nth-child(4){ width:70%; background:rgba(212,84,26,.4); }
.th-wp-shield { position:absolute; right:36px; top:50%; transform:translateY(-50%); width:38px; height:42px; }
.th-el .th-art::before { content:''; position:absolute; top:14px; left:20px; bottom:14px; width:46%; border:1.5px solid rgba(139,92,246,.4); border-radius:6px; background:rgba(139,92,246,.1); }
.th-el .th-art::after  { content:''; position:absolute; top:14px; right:20px; height:54%; width:44%; border:1.5px solid rgba(139,92,246,.4); border-radius:6px; background:rgba(139,92,246,.1); }
.th-el-b2   { position:absolute; bottom:14px; right:20px; height:35%; width:44%; border:1.5px solid rgba(139,92,246,.3); border-radius:6px; background:rgba(139,92,246,.08); }
.th-el-bolt { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); color:rgba(139,92,246,.7); font-size:26px; }
.th-seo .th-art::before { content:''; position:absolute; bottom:18px; left:26px; right:26px; height:1.5px; background:rgba(58,125,100,.3); }
.th-seo-bars { position:absolute; bottom:19px; left:28px; right:28px; display:flex; align-items:flex-end; gap:6px; height:86px; }
.th-seo-bars span { flex:1; border-radius:3px 3px 0 0; min-height:6px; background:rgba(58,125,100,.22); }
.th-seo-bars span.hi { background:rgba(58,125,100,.7); }
.th-seo-arrow { position:absolute; top:14px; right:28px; color:rgba(58,125,100,.8); font-size:20px; font-weight:700; }
.th-woo-cards { position:absolute; inset:12px 14px; display:flex; gap:7px; }
.th-woo-card { flex:1; border:1.5px solid rgba(139,92,246,.3); border-radius:6px; background:rgba(255,255,255,.5); overflow:hidden; display:flex; flex-direction:column; }
.th-woo-card-img { height:55%; background:rgba(139,92,246,.14); }
.th-woo-card-body { padding:5px 6px; display:flex; flex-direction:column; gap:3px; }
.th-woo-card-line { height:5px; border-radius:2px; background:rgba(28,26,22,.12); }
.th-woo-card-line.ac { background:rgba(212,84,26,.5); width:65%; }
.th-host .th-art::before { content:''; position:absolute; top:14px; left:20px; right:20px; bottom:14px; border:1.5px solid rgba(232,150,12,.35); border-radius:7px; background:rgba(255,255,255,.5); }
.th-host-rows { position:absolute; top:35px; left:20px; right:20px; display:flex; flex-direction:column; }
.th-host-row { display:flex; align-items:center; gap:8px; padding:6px 10px; border-bottom:1px solid rgba(232,150,12,.12); }
.th-host-row:first-child { background:rgba(232,150,12,.12); }
.th-host-name  { font-size:9.5px; font-weight:600; color:rgba(120,90,0,.9); flex:1; font-family:var(--fb); }
.th-host-check { font-size:11px; color:rgba(58,125,100,.9); }
.th-host-score { font-size:9.5px; font-weight:700; color:rgba(180,100,0,.9); }
.th-ai-bubbles { position:absolute; inset:12px; display:flex; flex-direction:column; gap:7px; justify-content:center; }
.th-ai-bub { padding:7px 11px; border-radius:9px; font-size:9.5px; font-weight:500; color:var(--ink2); line-height:1.4; font-family:var(--fb); }
.th-ai-bub.user { background:rgba(255,255,255,.75); border:1px solid rgba(59,84,112,.25); align-self:flex-start; max-width:76%; }
.th-ai-bub.bot  { background:rgba(59,84,112,.12); border:1px solid rgba(59,84,112,.2); align-self:flex-end; max-width:80%; }
.tpill { position:absolute; bottom:11px; left:12px; z-index:2; font-size:9.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; padding:4px 10px; border-radius:999px; color:#fff; }
.tthumb::after { content:''; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(to bottom, transparent 55%, rgba(28,26,22,.12) 100%); }
.tut-body { padding:18px; flex:1; display:flex; flex-direction:column; gap:8px; }
.tut-ttl { font-family:var(--fd); font-size:14.5px; font-weight:800; line-height:1.32; color:var(--ink); transition:color .15s; }
.tut-card:hover .tut-ttl { color:var(--terra); }
.tut-exc { font-size:12.5px; color:var(--ink3); line-height:1.64; flex:1; }
.tut-meta { display:flex; align-items:center; gap:10px; padding-top:12px; border-top:1px solid var(--bd); margin-top:auto; }
.tut-rd  { font-size:11px; color:var(--ink3); display:flex; align-items:center; gap:4px; font-weight:500; }
.tut-lnk { margin-left:auto; font-size:11.5px; font-weight:700; color:var(--terra); }

/* WHY MANZARI */
.why { padding:var(--sp) 0; background: var(--cream2); border-top: 1px solid var(--bd); border-bottom: 1px solid var(--bd); position:relative; overflow:hidden; }
.why-mark { position:absolute; right:-30px; top:50%; transform:translateY(-50%); font-family:var(--fd); font-size:280px; font-weight:900; line-height:1; color:rgba(212,84,26,.05); pointer-events:none; user-select:none; letter-spacing:-.04em; }
.why-in  { position:relative; z-index:1; }
.why-hd  { text-align:center; }
.why-hd .ssub { margin-inline:auto; }
.why-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.why-card { background:var(--white); border:1px solid var(--bd); border-radius:var(--r4); padding:28px; display:flex; gap:18px; align-items:flex-start; box-shadow:var(--sh-card); transition:all .18s ease; }
.why-card:hover { transform:translateY(-2px); box-shadow:var(--sh-hover); }
.why-ico { width:48px; height:48px; flex-shrink:0; border-radius:var(--r2); display:flex; align-items:center; justify-content:center; background:rgba(212,84,26,.08); border:1px solid rgba(212,84,26,.15); }
.why-ttl { font-family:var(--fd); font-size:16px; font-weight:800; color:var(--ink); margin-bottom:7px; }
.why-txt { font-size:13px; color:var(--ink2); line-height:1.68; }

/* NEWSLETTER */
.nl { padding:var(--sp) 0; background: var(--ink); position:relative; overflow:hidden; }
.nl-geo { position:absolute; pointer-events:none; width:400px; height:400px; border-radius:50%; border:1px solid rgba(232,150,12,.15); }
.nl-geo-1 { top:-120px; left:-80px; }
.nl-geo-2 { bottom:-120px; right:-80px; transform:scale(1.3); border-color:rgba(212,84,26,.1); }
.nl-geo-3 { top:50%; left:50%; transform:translate(-50%,-50%) scale(1.8); border-color:rgba(255,255,255,.04); }
.nl-box { position:relative; z-index:1; max-width:660px; margin-inline:auto; text-align:center; }
.nl-ttl { font-family:var(--fd); font-size:clamp(26px,3.8vw,44px); font-weight:900; line-height:1.1; letter-spacing:-.02em; color:#fff; margin-bottom:14px; }
.nl-sub  { font-size:15.5px; color:rgba(255,255,255,.55); margin-bottom:34px; line-height:1.68; }
.nl-form { display:flex; gap:10px; max-width:460px; margin-inline:auto; }
.nl-in { flex:1; padding:12px 17px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.15); border-radius:var(--r2); font-family:var(--fb); font-size:14px; color:#fff; outline:none; transition:border-color .18s, box-shadow .18s; }
.nl-in::placeholder { color:rgba(255,255,255,.35); }
.nl-in:focus { border-color:rgba(232,150,12,.6); box-shadow:0 0 0 3px rgba(232,150,12,.15); }
.nl-trust { margin-top:14px; font-size:12px; color:rgba(255,255,255,.35); display:flex; align-items:center; justify-content:center; gap:6px; }
.nl-pill { display:inline-flex; align-items:center; gap:7px; margin-bottom:22px; padding:5px 13px; border-radius:999px; border:1px solid rgba(232,150,12,.35); background:rgba(232,150,12,.12); font-size:11px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--saf); }

/* FOOTER */
.footer { background:var(--ink); border-top:1px solid rgba(255,255,255,.06); padding:60px 0 28px; }
.footer-grid { display:grid; grid-template-columns:1.8fr 1fr 1fr 1fr; gap:36px; margin-bottom:48px; }
.fl { display:block; font-family:var(--fd); font-size:20px; font-weight:900; color:#fff; text-decoration:none; margin-bottom:12px; letter-spacing:-.02em; }
.fl em { font-style:normal; color:var(--saf); }
.ftag { font-size:13px; color:rgba(255,255,255,.4); line-height:1.72; margin-bottom:20px; }
.fsocs { display:flex; gap:8px; }
.fsoc { width:32px; height:32px; border-radius:var(--r1); border:1px solid rgba(255,255,255,.1); background:transparent; display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.35); text-decoration:none; transition:all .15s; }
.fsoc:hover { border-color:rgba(212,84,26,.5); color:var(--saf); background:rgba(212,84,26,.12); }
.fct { font-family:var(--fb); font-size:10.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.3); margin-bottom:16px; }
.flinks { display:flex; flex-direction:column; gap:10px; list-style:none; }
.flinks a { font-size:13px; color:rgba(255,255,255,.45); text-decoration:none; transition:color .15s; }
.flinks a:hover { color:rgba(255,255,255,.85); }
.fbot { padding-top:24px; border-top:1px solid rgba(255,255,255,.07); display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.fcopy { font-size:12.5px; color:rgba(255,255,255,.25); }
.flegal { display:flex; gap:18px; }
.flegal a { font-size:12.5px; color:rgba(255,255,255,.25); text-decoration:none; transition:color .15s; }
.flegal a:hover { color:rgba(255,255,255,.55); }

/* RESPONSIVE */
@media(max-width:1040px){
  .hero-inner   { grid-template-columns:1fr; gap:0; }
  .hh-r         { display:none; }
  .hero-circle  { display:none; }
  .cat-grid     { grid-template-columns:repeat(2,1fr); }
  .tools-grid   { grid-template-columns:repeat(2,1fr); }
  .tut-grid     { grid-template-columns:repeat(2,1fr); }
  .why-grid     { grid-template-columns:repeat(2,1fr); max-width:720px; margin-inline:auto; }
  .footer-grid  { grid-template-columns:1.4fr 1fr 1fr; }
  .footer-grid > div:last-child { grid-column: 2; }
}

@media(max-width:768px){
  .nav-links, .nav-end .btn { display:none; }
  .nav-ham      { display:flex; }
  .stats-grid   { grid-template-columns:repeat(2,1fr); }
  .stat         { border-right:none; border-bottom:1px solid rgba(255,255,255,.08); }
  .cat-grid     { grid-template-columns:1fr; }
  .tools-grid   { grid-template-columns:1fr; }
  .tut-grid     { grid-template-columns:1fr; }
  .why-grid     { grid-template-columns:1fr; max-width:100%; }
  .tools-hd, .tuts-hd { flex-direction:column; align-items:flex-start; }
  .nl-form      { flex-direction:column; }
  .footer-grid  { grid-template-columns:1fr; }
}

@media(max-width:480px){
  .stats-grid { grid-template-columns:1fr; }
  .hh-cta     { flex-direction:column; }
  .hh-cta .btn { justify-content:center; }
  .why-grid   { grid-template-columns:1fr; max-width:100%; }
}

/* SINGLE POST */
.single-wrap { padding: calc(var(--sp) + 62px) 0 var(--sp); }

.single-header { max-width: 780px; margin: 0 auto 48px; text-align: center; }

.single-cats { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-bottom: 20px; }
.single-cat {
  font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--terra); text-decoration: none;
  padding: 4px 12px; border-radius: 999px;
  background: rgba(212,84,26,.08); border: 1px solid rgba(212,84,26,.2);
  transition: all .15s;
}
.single-cat:hover { background: rgba(212,84,26,.15); }

.single-title {
  font-family: var(--fd);
  font-size: clamp(28px,4vw,52px);
  font-weight: 900; line-height: 1.1;
  letter-spacing: -.02em; color: var(--ink);
  margin-bottom: 24px;
}

.single-meta {
  display: flex; align-items: center; justify-content: center;
  gap: 10px; flex-wrap: wrap;
  font-size: 13px; color: var(--ink3);
}
.single-author, .single-date, .single-read {
  display: flex; align-items: center; gap: 5px; font-weight: 500;
}
.single-sep { color: var(--ink4); }

.single-content {
  max-width: 780px; margin: 0 auto;
  font-size: 17px; line-height: 1.82;
  color: var(--ink2);
}
.single-content h2 { font-family: var(--fd); font-size: clamp(22px,2.8vw,32px); font-weight: 800; color: var(--ink); margin: 48px 0 16px; line-height: 1.2; }
.single-content h3 { font-family: var(--fd); font-size: clamp(18px,2.2vw,24px); font-weight: 700; color: var(--ink); margin: 36px 0 12px; }
.single-content p { margin-bottom: 24px; }
.single-content a { color: var(--terra); text-decoration: underline; text-decoration-color: rgba(212,84,26,.35); text-underline-offset: 3px; }
.single-content a:hover { text-decoration-color: var(--terra); }
.single-content ul, .single-content ol { margin: 0 0 24px 24px; }
.single-content li { margin-bottom: 8px; }
.single-content blockquote {
  border-left: 3px solid var(--terra); margin: 36px 0;
  padding: 16px 24px; background: rgba(212,84,26,.04);
  border-radius: 0 var(--r2) var(--r2) 0;
  font-style: italic; color: var(--ink2);
}
.single-content img { max-width: 100%; border-radius: var(--r3); margin: 32px 0; }
.single-content code {
  font-size: 13.5px;
  background: rgba(212,84,26,.08);
  color: var(--terra);
  padding: 3px 8px;
  border-radius: 5px;
  font-family: monospace;
  border: 1px solid rgba(212,84,26,.18);
  letter-spacing: .02em;
}
.single-content pre { background: var(--ink); color: #fff; padding: 24px; border-radius: var(--r2); overflow-x: auto; margin: 32px 0; }

.single-tags { max-width: 780px; margin: 48px auto 0; display: flex; gap: 8px; flex-wrap: wrap; padding-top: 32px; border-top: 1px solid var(--bd); }
.single-tag {
  font-size: 12px; font-weight: 600; color: var(--ink2);
  padding: 5px 13px; border-radius: 999px;
  border: 1px solid var(--bd); background: var(--white);
  text-decoration: none; transition: all .15s;
}
.single-tag:hover { border-color: var(--bdh); color: var(--terra); }

.related-posts { margin-top: var(--sp); padding-top: var(--sp); border-top: 1px solid var(--bd); }
.related-hd { margin-bottom: clamp(36px,5vw,54px); }

/* ARCHIVE */
.archive-wrap { padding: calc(var(--sp) + 62px) 0 var(--sp); }
.archive-header { margin-bottom: clamp(36px,5vw,54px); }
.archive-empty { color: var(--ink3); font-size: 15px; padding: 48px 0; }
.archive-pagination { margin-top: clamp(36px,5vw,54px); display:flex; justify-content:center; }
.archive-pagination .nav-links { display:flex; gap:8px; align-items:center; }
.archive-pagination .page-numbers {
  padding: 8px 16px; border-radius: var(--r1);
  font-size: 14px; font-weight: 600;
  color: var(--ink2); text-decoration: none;
  border: 1px solid var(--bd); background: var(--white);
  transition: all .15s;
}
.archive-pagination .page-numbers:hover { border-color: var(--bdh); color: var(--terra); }
.archive-pagination .page-numbers.current { background: var(--terra); color: #fff; border-color: var(--terra); }

/* RECOMMENDED PAGE */
.rec-wrap { padding: calc(var(--sp) + 62px) 0 var(--sp); }
.rec-header { max-width: 680px; margin-bottom: clamp(48px,6vw,72px); }
.rec-section { margin-bottom: clamp(48px,6vw,72px); }
.rec-cat-hd { margin-bottom: 28px; padding-bottom: 16px; border-bottom: 1px solid var(--bd); }
.rec-cat-title { font-family: var(--fd); font-size: clamp(20px,2.4vw,28px); font-weight: 800; color: var(--ink); }
.rec-cat-desc { font-size: 14px; color: var(--ink3); margin-top: 6px; }

.deal-review {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 8px 16px; border-radius: var(--r1);
  font-size: 12.5px; font-weight: 700;
  color: var(--terra); text-decoration: none;
  border: 1.5px solid var(--terra);
  background: transparent;
  transition: all .18s;
}
.deal-review:hover { background: var(--terra); color: #fff; box-shadow: 0 2px 8px rgba(212,84,26,.3); transform: translateY(-1px); }

```

Save both files and then visit:
```
https://stg-manzaricom-manzaribeta.kinsta.cloud/recommended/

.deal-review {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 8px 16px; border-radius: var(--r1);
  font-size: 12.5px; font-weight: 700;
  color: var(--ink); text-decoration: none;
  border: 1.5px solid var(--bd);
  background: var(--white);
  box-shadow: var(--sh-card);
  transition: all .18s;
}

/* SINGLE REVIEW */
.review-wrap { padding: calc(var(--sp) + 62px) 0 var(--sp); }
.review-layout { display: grid; grid-template-columns: 1fr 320px; gap: 48px; align-items: start; }
.review-header { margin-bottom: 40px; max-width: 780px; }
.review-title { font-family: var(--fd); font-size: clamp(28px,4vw,48px); font-weight: 900; line-height: 1.1; letter-spacing: -.02em; color: var(--ink); margin: 16px 0 20px; }

.review-header .single-cats { justify-content: flex-start; }
.review-header .single-meta { justify-content: flex-start; }
/* Sidebar card */
.review-sidebar { position: sticky; top: 82px; }
.review-card { background: var(--white); border: 1px solid var(--bd); border-radius: var(--r4); padding: 24px; box-shadow: var(--sh-card); display: flex; flex-direction: column; gap: 14px; }
.review-card-logo { display: flex; align-items: center; justify-content: center; padding-bottom: 14px; border-bottom: 1px solid var(--bd); }
.review-logo { max-width: 120px; max-height: 60px; object-fit: contain; }
.review-card-name { font-family: var(--fd); font-size: 18px; font-weight: 800; color: var(--ink); }
.review-card-score { display: flex; align-items: center; gap: 12px; }
.review-score { font-family: var(--fd); font-size: 32px; font-weight: 900; color: var(--terra); line-height: 1; }
.review-score span { font-size: 16px; color: var(--ink3); font-family: var(--fb); font-weight: 500; }
.review-card-price { font-size: 14px; font-weight: 700; color: var(--ink); padding: 10px 14px; background: var(--cream2); border-radius: var(--r2); }
.review-card-disclaimer { font-size: 11px; color: var(--ink4); line-height: 1.5; }

/* Mobile card */
.review-card-mobile { display: none; }

/* Pros & Cons */
.review-proscons { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 40px 0; }
.review-pros { background: rgba(58,125,100,.06); border: 1px solid rgba(58,125,100,.2); border-radius: var(--r3); padding: 20px; }
.review-cons { background: rgba(212,84,26,.05); border: 1px solid rgba(212,84,26,.18); border-radius: var(--r3); padding: 20px; }
.review-pc-hd { display: flex; align-items: center; gap: 8px; font-family: var(--fd); font-size: 15px; font-weight: 800; margin-bottom: 14px; }
.pros-hd { color: var(--sage); }
.cons-hd { color: var(--terra); }
.review-pc-list { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.review-pc-list li { font-size: 14px; color: var(--ink2); line-height: 1.55; padding-left: 16px; position: relative; }
.review-pc-list li::before { content: ''; position: absolute; left: 0; top: 8px; width: 6px; height: 6px; border-radius: 50%; }
.review-pros .review-pc-list li::before { background: var(--sage); }
.review-cons .review-pc-list li::before { background: var(--terra); }

/* Comparison Table */
.review-comparison { margin: 40px 0; }
.review-section-title { font-family: var(--fd); font-size: clamp(20px,2.4vw,26px); font-weight: 800; color: var(--ink); margin-bottom: 20px; }
.review-table-wrap { overflow-x: auto; border-radius: var(--r3); border: 1px solid var(--bd); }
.review-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.review-table th { background: var(--cream2); padding: 12px 16px; text-align: left; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink3); border-bottom: 1px solid var(--bd); }
.review-table td { padding: 12px 16px; border-bottom: 1px solid var(--bd2); color: var(--ink2); }
.review-table tr:last-child td { border-bottom: none; }
.review-table-highlight td { background: rgba(212,84,26,.04); font-weight: 600; color: var(--ink); }
.review-winner { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; color: var(--sage); background: rgba(58,125,100,.1); padding: 3px 10px; border-radius: 999px; }

/* Verdict */
.review-verdict { background: var(--ink); border-radius: var(--r4); padding: 32px; margin: 40px 0; display: flex; flex-direction: column; gap: 16px; }
.review-verdict-top { display: flex; align-items: center; justify-content: space-between; }
.review-verdict-label { font-family: var(--fb); font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--saf); }
.review-verdict-score { font-family: var(--fd); font-size: 40px; font-weight: 900; color: var(--terra); line-height: 1; }
.review-verdict-score span { font-size: 18px; color: rgba(255,255,255,.4); font-family: var(--fb); }
.review-verdict-text { font-size: 16px; color: rgba(255,255,255,.75); line-height: 1.72; }

/* Responsive */
@media(max-width:900px) {
  .review-layout { grid-template-columns: 1fr; gap: 0; }
  .review-sidebar { display: none; }
  .review-main { min-width: 0; width: 100%; overflow-x: hidden; }
  .review-card-mobile { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; background: var(--white); border: 1px solid var(--bd); border-radius: var(--r3); padding: 20px; margin-bottom: 32px; box-shadow: var(--sh-card); }
  .review-card-meta { flex: 1; }
  .review-proscons { grid-template-columns: 1fr; }
  .review-table-wrap { overflow-x: auto; max-width: 100%; }
}

/* RECOMMENDATION FILTERS */
.rec-filters {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-bottom: clamp(36px,5vw,54px);
}
.rec-filter {
  display: inline-flex; align-items: center;
  padding: 7px 16px; border-radius: 999px;
  font-size: 13px; font-weight: 600;
  color: var(--ink2); text-decoration: none;
  border: 1.5px solid var(--bd);
  background: var(--white);
  transition: all .15s;
}
.rec-filter:hover { border-color: var(--bdh); color: var(--terra); }
.rec-filter.active { background: var(--terra); color: #fff; border-color: var(--terra); }

/* MOBILE MENU */
.nav-open .nav-links {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 62px; left: 0; right: 0;
  background: rgba(250,248,243,.98);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--bd);
  padding: 12px 0;
  gap: 0;
  z-index: 199;
}
.nav-open .nav-links a {
  padding: 12px clamp(18px,4.5vw,48px);
  border-radius: 0;
  font-size: 15px;
  border-bottom: 1px solid var(--bd2);
}
.nav-open .nav-links li:last-child a { border-bottom: none; }

/* Hamburger animation */
.nav-open .nav-ham span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-open .nav-ham span:nth-child(2) { opacity: 0; }
.nav-open .nav-ham span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.nav-ham span { transition: transform .2s ease, opacity .2s ease; }


.nav-links-cta { display: none; }
@media(max-width:768px) {
  .nav-links-cta { display: block; padding: 12px clamp(18px,4.5vw,48px); }
  .nav-links-cta a { width: 100%; justify-content: center; border-radius: var(--r2) !important; color: #fff !important; }
  .nav-links-cta a:hover { color: #fff !important; background: var(--terra2) !important; border-color: var(--terra2) !important; }
}

/* PAGE */
.page-wrap { padding: calc(var(--sp) + 62px) 0 var(--sp); }
.page-content { max-width: 780px; margin: 0 auto; }
.page-header { margin-bottom: 40px; }
.page-title {
  font-family: var(--fd);
  font-size: clamp(28px,4vw,48px);
  font-weight: 900; line-height: 1.1;
  letter-spacing: -.02em; color: var(--ink);
}

/* ABOUT PAGE IMAGE WRAP */
.page-content img {
  float: left;
  margin: 0 24px 16px 0;
  border-radius: var(--r3);
  max-width: 280px;
}
.page-content::after {
  content: '';
  display: table;
  clear: both;
}


/* CODE SHORTCODE */
.manzari-code-wrap {
  margin: 32px 0;
  border-radius: var(--r2);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.06);
}
.manzari-code-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 16px;
  background: #282c34;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.manzari-code-lang {
  font-family: var(--fb); font-size: 11px; font-weight: 700;
  letter-spacing: .08em; color: var(--terra);
}
.manzari-code-copy {
  font-family: var(--fb); font-size: 11px; font-weight: 600;
  color: rgba(255,255,255,.8) !important;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.2); border-radius: 4px;
  padding: 3px 10px; cursor: pointer; transition: all .15s;
}
.manzari-code-copy:hover { color: #fff !important; border-color: rgba(255,255,255,.4); }
.manzari-code-copy.copied { color: #22c55e !important; border-color: #22c55e; }
.manzari-code-pre {
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: #282c34 !important;
}
.manzari-code-pre .hljs {
  font-family: monospace; font-size: 14px;
  line-height: 1.7;
  padding: 20px !important;
  background: #282c34 !important;
  white-space: pre;
}

/* SEARCH */
.nav-search { display: flex; align-items: center; position: relative; }
.nav-search-btn {
  background: transparent; border: none; cursor: pointer;
  color: var(--ink2); padding: 6px; border-radius: var(--r1);
  display: flex; align-items: center; justify-content: center;
  transition: color .15s;
}
.nav-search-btn:hover { color: var(--terra); }
.nav-search-box {
  position: absolute; right: 32px; top: 50%; transform: translateY(-50%);
  width: 0; overflow: hidden; transition: width .25s ease;
}
.nav-search-box.open { width: 240px; }
.nav-search-box form {
  display: flex; align-items: center;
  background: var(--white); border: 1.5px solid var(--bd);
  border-radius: var(--r2); overflow: hidden;
  box-shadow: var(--sh-card);
}
.nav-search-input {
  flex: 1; padding: 8px 12px; font-size: 13.5px;
  font-family: var(--fb); color: var(--ink);
  border: none; outline: none; background: transparent;
  min-width: 0;
}
.nav-search-input::placeholder { color: var(--ink4); }
.nav-search-submit {
  background: transparent; border: none; cursor: pointer;
  color: var(--ink3); padding: 8px 10px;
  display: flex; align-items: center;
  transition: color .15s;
}
.nav-search-submit:hover { color: var(--terra); }

/* SEARCH RESULTS PAGE */
.search-wrap { padding: calc(var(--sp) + 82px) 0 var(--sp); }
.search-header { margin-bottom: clamp(36px,5vw,54px); }
.search-title { font-family: var(--fd); font-size: clamp(24px,3.2vw,36px); font-weight: 800; color: var(--ink); margin-bottom: 8px; }
.search-count { font-size: 14px; color: var(--ink3); }
.search-section { margin-bottom: clamp(48px,6vw,72px); }
.search-section-title { font-family: var(--fd); font-size: clamp(18px,2.2vw,24px); font-weight: 800; color: var(--ink); margin-bottom: 24px; padding-bottom: 12px; border-bottom: 1px solid var(--bd); }
.search-empty { text-align: center; padding: 80px 0; }
.search-empty-title { font-family: var(--fd); font-size: clamp(22px,2.8vw,32px); font-weight: 800; color: var(--ink); margin-bottom: 12px; }
.search-empty-sub { font-size: 15px; color: var(--ink3); margin-bottom: 32px; }

/* BREADCRUMBS */
.breadcrumbs { margin-bottom: 24px; }
.bc-list { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; list-style: none; padding: 0; margin: 0; }
.bc-item { display: flex; align-items: center; gap: 4px; font-size: 12.5px; }
.bc-link { color: var(--ink3); text-decoration: none; font-weight: 500; transition: color .15s; }
.bc-link:hover { color: var(--terra); }
.bc-sep { color: var(--ink4); font-size: 11px; }
.bc-current { color: var(--ink2); font-weight: 500; }

/* 404 PAGE */
.error-wrap { padding: calc(var(--sp) + 82px) 0 var(--sp); }
.error-inner { max-width: 600px; margin: 0 auto; text-align: center; }
.error-code {
  font-family: var(--fd); font-size: clamp(80px,12vw,140px);
  font-weight: 900; line-height: 1;
  background: linear-gradient(120deg, var(--terra), var(--saf));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text; margin-bottom: 16px;
}
.error-title {
  font-family: var(--fd); font-size: clamp(28px,4vw,42px);
  font-weight: 900; color: var(--ink); margin-bottom: 16px;
}
.error-sub {
  font-size: 16px; color: var(--ink3); line-height: 1.72;
  margin-bottom: 40px; max-width: 480px; margin-inline: auto;
}
.error-actions {
  display: flex; flex-wrap: wrap; gap: 12px;
  justify-content: center; margin-bottom: 48px;
}
.error-search-label {
  font-size: 13px; color: var(--ink3); margin-bottom: 14px; font-weight: 500;
}
.error-search-form {
  display: flex; gap: 10px; max-width: 440px;
  margin-inline: auto; flex-wrap: wrap;
}
.error-search-input {
  flex: 1; min-width: 200px; padding: 12px 16px;
  font-family: var(--fb); font-size: 14px; color: var(--ink);
  background: var(--white); border: 1.5px solid var(--bd);
  border-radius: var(--r2); outline: none; transition: border-color .15s;
}
.error-search-input:focus { border-color: var(--terra); }
```

Save both files and test by going to any non-existent URL like:
```
https://stg-manzaricom-manzaribeta.kinsta.cloud/this-page-does-not-exist