/* myclacks — Editorial Bold Design System */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,300;12..96,400;12..96,500;12..96,600;12..96,700;12..96,800&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');

/* ── TOKENS ─────────────────────────────────────────────── */
:root {
  --bg:        #fafaf8;
  --bg-alt:    #f2f1ef;
  --surface:   #ffffff;
  --surface-2: #f5f4f1;
  --border:    #e8e6e1;
  --border-hi: #c9c6c0;

  --accent:       #f97316;
  --accent-dark:  #ea580c;
  --accent-light: #fff7ed;
  --accent-xlight:#fffbf6;

  --green:   #16a34a;
  --amber:   #d97706;
  --rose:    #e11d48;
  --teal:    #0f766e;
  --purple:  #7c3aed;
  --blue:    #2563eb;

  --text:    #18181b;
  --text-2:  #52525b;
  --text-3:  #a1a1aa;
  --text-inv:#ffffff;

  --surface-input: #ffffff;

  --sh1: 0 1px 3px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.04);
  --sh2: 0 4px 14px rgba(0,0,0,.09), 0 2px 4px rgba(0,0,0,.04);
  --sh3: 0 10px 32px rgba(0,0,0,.10), 0 4px 8px rgba(0,0,0,.05);
  --sh4: 0 20px 60px rgba(0,0,0,.12), 0 8px 16px rgba(0,0,0,.06);

  --r:  12px;
  --rl: 16px;
}

/* ── RESET ───────────────────────────────────────────────── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box }
html { scroll-behavior:smooth; scroll-padding-top:64px }
body {
  font-family:'Plus Jakarta Sans',-apple-system,sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.55;
  overflow-x:hidden;
  min-height:100vh;
}

/* ── SCROLL REVEAL ───────────────────────────────────────── */
.reveal {
  opacity:0;
  transform:translateY(16px);
  transition:opacity .5s cubic-bezier(.16,1,.3,1), transform .5s cubic-bezier(.16,1,.3,1);
}
.reveal.visible { opacity:1; transform:none }
.reveal-delay-1 { transition-delay:.06s }
.reveal-delay-2 { transition-delay:.12s }
.reveal-delay-3 { transition-delay:.18s }
.reveal-delay-4 { transition-delay:.24s }

/* ── TOAST ───────────────────────────────────────────────── */
#toast {
  position:fixed;top:72px;right:16px;
  background:var(--text);
  color:#fff;
  padding:10px 16px;border-radius:10px;font-size:12px;font-weight:600;
  display:flex;align-items:center;gap:8px;
  z-index:1000;box-shadow:var(--sh3);
  opacity:0;transform:translateY(-8px) scale(.96);
  transition:opacity .3s,transform .3s;pointer-events:none;
}
#toast.show { opacity:1;transform:none }

/* ── HEADER ─────────────────────────────────────────────── */
header {
  background:rgba(250,250,248,.96);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);
  position:sticky;top:0;z-index:200;
}
.hdr {
  max-width:1280px;margin:0 auto;padding:0 24px;
  display:flex;align-items:center;height:58px;gap:0;
}
.logo {
  font-family:'Bricolage Grotesque',sans-serif;
  font-size:19px;font-weight:800;
  color:var(--text);
  text-decoration:none;
  display:flex;align-items:center;gap:8px;
  flex-shrink:0;letter-spacing:-.4px;margin-right:24px;
  transition:opacity .2s;
}
.logo:hover { opacity:.7 }
.logo-box {
  width:30px;height:30px;
  background:var(--accent);
  border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:15px;font-weight:800;
  font-family:'Bricolage Grotesque',sans-serif;
  transition:transform .2s,background .15s;
}
.logo:hover .logo-box { background:var(--accent-dark);transform:rotate(-5deg) }
nav { display:flex;gap:2px;flex:1;overflow-x:auto;-webkit-overflow-scrolling:touch }
nav::-webkit-scrollbar { display:none }
nav a {
  text-decoration:none;color:var(--text-2);
  font-size:13px;font-weight:600;
  padding:6px 12px;border-radius:8px;
  transition:all .15s;white-space:nowrap;flex-shrink:0;
}
nav a:hover { background:var(--accent-light);color:var(--accent) }
nav a.active { background:var(--accent-light);color:var(--accent-dark);font-weight:700 }
.hdr-right { display:flex;align-items:center;gap:8px;flex-shrink:0;margin-left:12px }
.lang-wrap { position:relative }
.lang-btn {
  display:flex;align-items:center;gap:6px;
  padding:6px 12px;
  background:var(--surface);
  border:1.5px solid var(--border);
  border-radius:8px;cursor:pointer;
  font-size:12px;font-weight:600;color:var(--text);
  transition:all .15s;font-family:inherit;
}
.lang-btn:hover { border-color:var(--accent);background:var(--accent-light);color:var(--accent-dark) }
.lang-menu {
  position:absolute;top:calc(100% + 8px);right:0;
  background:var(--surface);
  border:1px solid var(--border);border-radius:14px;
  box-shadow:var(--sh4);
  min-width:210px;display:none;overflow:hidden;z-index:300;padding:6px;
}
.lang-menu.open { display:block;animation:menu-pop .2s cubic-bezier(.16,1,.3,1) }
@keyframes menu-pop { from{opacity:0;transform:translateY(-8px) scale(.97)} to{opacity:1;transform:none} }
.lang-opt {
  display:flex;align-items:center;gap:10px;
  padding:8px 12px;cursor:pointer;
  font-size:13px;font-weight:500;border-radius:9px;
  color:var(--text-2);transition:all .12s;
}
.lang-opt:hover { background:var(--surface-2);color:var(--text) }
.lang-opt.active { background:var(--accent-light);color:var(--accent-dark);font-weight:700 }
.lang-opt .flg { font-size:18px;line-height:1 }
.lang-div { height:1px;background:var(--border);margin:4px 8px }

/* ── HERO — compact Airbnb-style strip ──────────────────── */
.hero {
  border-bottom:1px solid var(--border);
  padding:20px 24px 18px;
  background:var(--surface);
}
.hero-orb-1, .hero-orb-2, .hero-orb-3 { display:none }
.hero-badge { display:none }
.hero-cta   { display:none }
.hero-stats { display:none }

.hero-inner {
  max-width:1280px;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.hero h1 {
  font-family:'Bricolage Grotesque',sans-serif;
  font-size:clamp(1.25rem,2.5vw,1.65rem);
  font-weight:800;
  letter-spacing:-.04em;
  line-height:1.15;
  color:var(--text);
  flex:1;
}
.hero h1 em {
  font-style:normal;
  color:var(--accent);
}
.hero p {
  font-size:13px;
  color:var(--text-3);
  font-weight:500;
  flex-shrink:0;
  margin:0;
}
@keyframes slide-up { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:none} }

/* ── AD SLOTS ────────────────────────────────────────────── */
.ad-wrap { max-width:1280px;margin:0 auto;padding:0 24px }
.ad-slot { display:block;width:100% }
.ad-banner { min-height:0 }

/* ── SECTIONS ────────────────────────────────────────────── */
.sec { max-width:1280px;margin:0 auto;padding:32px 24px 0 }
.sec-hd {
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:16px;
}
.sec-title {
  font-family:'Bricolage Grotesque',sans-serif;
  font-size:12px;font-weight:700;
  display:flex;align-items:center;gap:8px;
  color:var(--text-3);text-transform:uppercase;letter-spacing:.12em;
}
.sec-title::before {
  content:'';width:14px;height:2.5px;
  background:var(--accent);
  border-radius:2px;
}
.chip {
  display:inline-flex;align-items:center;gap:4px;
  background:var(--accent-light);color:var(--accent-dark);
  border:1px solid rgba(249,115,22,.2);
  font-size:10px;font-weight:700;padding:3px 10px;
  border-radius:100px;text-transform:uppercase;letter-spacing:.06em;
}

/* ── TOOL CARDS ──────────────────────────────────────────── */
.tools-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:10px }
.tool-card {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r);
  padding:16px;
  display:flex;align-items:flex-start;gap:12px;
  text-decoration:none;color:inherit;cursor:pointer;
  transition:transform .2s cubic-bezier(.16,1,.3,1),
             border-color .2s,
             box-shadow .2s;
  position:relative;overflow:hidden;
}
.tool-card::before,.tool-card::after { display:none }
.tool-card:hover {
  transform:translateY(-3px);
  border-color:rgba(249,115,22,.3);
  box-shadow:var(--sh2);
}
.t-icon {
  width:38px;height:38px;border-radius:9px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:18px;
}
.fi { background:var(--accent-light) }
.hi { background:rgba(22,163,74,.1) }
.mi { background:rgba(37,99,235,.08) }
.t-body { flex:1;min-width:0 }
.t-name {
  font-family:'Bricolage Grotesque',sans-serif;
  font-size:13px;font-weight:700;
  margin-bottom:3px;letter-spacing:-.15px;line-height:1.3;
  color:var(--text);
}
.t-desc { font-size:11px;color:var(--text-3);line-height:1.45 }
.t-badge {
  display:inline-block;font-size:10px;font-weight:700;
  padding:2px 8px;border-radius:4px;margin-top:6px;
}
.tb-y { background:var(--accent-light);color:var(--accent-dark) }
.tb-g { background:rgba(22,163,74,.1);color:#16a34a }
.t-arrow {
  position:absolute;right:12px;bottom:12px;
  font-size:13px;color:var(--accent);
  opacity:0;transition:opacity .2s,transform .2s;
}
.tool-card:hover .t-arrow { opacity:1;transform:translate(2px,-2px) }

/* ── CALC CARD ───────────────────────────────────────────── */
.calc-wrap { max-width:1280px;margin:0 auto;padding:28px 24px 56px }
.calc-card {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--rl);
  overflow:hidden;margin-bottom:28px;
  box-shadow:var(--sh1);
  transition:box-shadow .2s;
}
.calc-card:hover { box-shadow:var(--sh2) }
.chdr {
  padding:18px 24px;color:#fff;
  display:flex;align-items:center;gap:14px;
}
.chdr-blue   { background:linear-gradient(135deg,#1d4ed8,#3b82f6) }
.chdr-green  { background:linear-gradient(135deg,#15803d,#22c55e) }
.chdr-purple { background:linear-gradient(135deg,#6d28d9,#8b5cf6) }
.chdr-orange { background:linear-gradient(135deg,#c2410c,#f97316) }
.chdr-teal   { background:linear-gradient(135deg,#0f766e,#14b8a6) }
.chdr-rose   { background:linear-gradient(135deg,#be123c,#f43f5e) }
.chdr-icon {
  width:42px;height:42px;
  background:rgba(255,255,255,.2);
  border-radius:10px;
  display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0;
}
.chdr h2 { font-family:'Bricolage Grotesque',sans-serif;font-size:17px;font-weight:800;letter-spacing:-.3px }
.chdr p  { font-size:12px;opacity:.7;margin-top:2px }
.cbody {
  padding:24px;
  display:grid;grid-template-columns:340px 1fr;gap:24px;align-items:start;
}
.cinputs { display:flex;flex-direction:column;gap:14px }
.fg { display:flex;flex-direction:column;gap:6px }
.fg label {
  font-size:11px;font-weight:700;color:var(--text-3);
  letter-spacing:.07em;text-transform:uppercase;
}
.fg input, .fg select {
  width:100%;padding:10px 14px;
  border:1.5px solid var(--border);
  border-radius:9px;
  font-size:14px;color:var(--text);
  background:var(--surface-input);
  transition:border-color .15s,box-shadow .15s;
  font-family:inherit;outline:none;
  appearance:none;-webkit-appearance:none;
}
.fg select {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23a1a1aa' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;padding-right:32px;
}
.fg input:focus, .fg select:focus {
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(249,115,22,.12);
}
.fg .pw { position:relative }
.fg .pw .pfx {
  position:absolute;left:13px;top:50%;transform:translateY(-50%);
  color:var(--text-3);font-size:13px;font-weight:600;pointer-events:none;z-index:1;
}
.fg .pw input { padding-left:24px }
.two-col { display:grid;grid-template-columns:1fr 1fr;gap:10px }
.cbtn {
  width:100%;padding:12px;margin-top:4px;
  background:var(--accent);
  color:#fff;border:none;border-radius:9px;
  font-size:14px;font-weight:700;cursor:pointer;
  font-family:inherit;letter-spacing:-.1px;
  box-shadow:0 2px 10px rgba(249,115,22,.28);
  transition:background .15s,transform .15s,box-shadow .15s;
}
.cbtn:hover {
  background:var(--accent-dark);
  transform:translateY(-1px);
  box-shadow:0 4px 18px rgba(249,115,22,.38);
}
.cbtn:active { transform:scale(.98) }
.cbtn-green  { background:#16a34a;box-shadow:0 2px 10px rgba(22,163,74,.25) }
.cbtn-green:hover  { background:#15803d;box-shadow:0 4px 18px rgba(22,163,74,.38) }
.cbtn-purple { background:#7c3aed;box-shadow:0 2px 10px rgba(124,58,237,.25) }
.cbtn-purple:hover { background:#6d28d9;box-shadow:0 4px 18px rgba(124,58,237,.38) }
.cbtn-orange { background:#ea580c;box-shadow:0 2px 10px rgba(234,88,12,.25) }
.cbtn-orange:hover { background:#c2410c;box-shadow:0 4px 18px rgba(234,88,12,.38) }
.cbtn-teal   { background:#0f766e;box-shadow:0 2px 10px rgba(15,118,110,.25) }
.cbtn-teal:hover   { background:#0d6960;box-shadow:0 4px 18px rgba(15,118,110,.38) }
.cbtn-rose   { background:#e11d48;box-shadow:0 2px 10px rgba(225,29,72,.25) }
.cbtn-rose:hover   { background:#be123c;box-shadow:0 4px 18px rgba(225,29,72,.38) }
.utog {
  display:flex;
  background:var(--surface-2);
  border:1.5px solid var(--border);
  border-radius:9px;overflow:hidden;padding:3px;gap:3px;
}
.ubtn {
  flex:1;padding:7px 10px;background:none;border:none;
  font-size:12px;font-weight:700;cursor:pointer;
  transition:all .15s;font-family:inherit;color:var(--text-3);border-radius:7px;
}
.ubtn.on {
  background:var(--accent);color:#fff;
  box-shadow:0 2px 8px rgba(249,115,22,.3);
}
.cresults { display:flex;flex-direction:column;gap:12px }
.res-title { font-size:11px;font-weight:700;color:var(--text-3);letter-spacing:.07em;text-transform:uppercase }
.res-main { border-radius:12px;padding:20px 22px;color:#fff }
.res-main .rl { font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;opacity:.65;margin-bottom:4px }
.res-main .rv {
  font-family:'Bricolage Grotesque',sans-serif;
  font-size:36px;font-weight:800;line-height:1;letter-spacing:-1.5px;
}
.res-main .rsub { font-size:12px;opacity:.6;margin-top:6px }
.res-grid { display:grid;grid-template-columns:1fr 1fr;gap:10px }
.rb {
  background:var(--surface-2);
  border:1px solid var(--border);
  border-radius:10px;padding:13px 15px;
}
.rb .rl { font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3) }
.rb .rv {
  font-family:'Bricolage Grotesque',sans-serif;
  font-size:19px;font-weight:700;color:var(--text);margin-top:3px;letter-spacing:-.4px;
}
.rb-green { background:rgba(22,163,74,.06);border-color:rgba(22,163,74,.18) }
.rb-green .rl { color:#16a34a }
.rb-green .rv { color:#15803d;font-size:13px;font-weight:700 }
.rb-orange { background:rgba(217,119,6,.06);border-color:rgba(217,119,6,.18) }
.rb-orange .rl { color:#d97706 }
.rb-orange .rv { color:#b45309;font-size:13px;font-weight:700 }
.res-empty {
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-height:200px;
  background:var(--surface-2);
  border:1.5px dashed var(--border-hi);
  border-radius:12px;color:var(--text-3);
  font-size:13px;font-weight:600;gap:10px;
}
.res-empty .ei { font-size:36px;line-height:1;opacity:.35 }
.donut-wrap {
  display:flex;align-items:center;gap:18px;
  background:var(--surface-2);border:1px solid var(--border);
  border-radius:10px;padding:16px 18px;
}
.donut-svg { flex-shrink:0 }
.donut-legend { display:flex;flex-direction:column;gap:9px;font-size:12px }
.dl-item { display:flex;align-items:center;gap:8px;font-weight:600;color:var(--text) }
.dl-dot { width:9px;height:9px;border-radius:50%;flex-shrink:0 }
.dl-amt { font-size:11px;color:var(--text-2);font-weight:500 }
.prog-wrap {
  background:var(--surface-2);border:1px solid var(--border);
  border-radius:10px;padding:14px 16px;
}
.prog-label { display:flex;justify-content:space-between;font-size:11px;font-weight:700;color:var(--text-3);margin-bottom:8px }
.prog-track { height:6px;background:var(--border);border-radius:3px;overflow:hidden }
.prog-fill {
  height:100%;border-radius:3px;
  background:linear-gradient(90deg,var(--green),var(--accent));
  width:0%;transition:width 1.2s cubic-bezier(.16,1,.3,1);
}
.prog-fill.danger { background:linear-gradient(90deg,#d97706,#e11d48) }
.bmi-gauge {
  background:var(--surface-2);border:1px solid var(--border);
  border-radius:12px;padding:18px;text-align:center;
}
.bmi-num {
  font-family:'Bricolage Grotesque',sans-serif;
  font-size:54px;font-weight:800;line-height:1;letter-spacing:-3px;color:var(--text);
}
.bmi-tag { display:inline-block;padding:4px 16px;border-radius:100px;font-size:11px;font-weight:700;margin-top:8px }
.bU { color:#1d4ed8;background:rgba(37,99,235,.1) }
.bN { color:#16a34a;background:rgba(22,163,74,.1) }
.bO { color:#d97706;background:rgba(217,119,6,.1) }
.bX { color:#e11d48;background:rgba(225,29,72,.1) }
.bmi-bar-wrap {
  margin:16px 0 6px;height:6px;border-radius:3px;
  background:linear-gradient(90deg,#3b82f6 0%,#22c55e 40%,#f59e0b 65%,#ef4444 100%);
  position:relative;
}
.bmi-marker {
  position:absolute;top:50%;width:14px;height:14px;
  background:#fff;border:2.5px solid var(--text);
  border-radius:50%;box-shadow:var(--sh2);
  transform:translate(-50%,-50%);
  transition:left .9s cubic-bezier(.16,1,.3,1);
}
.bmi-scale { display:flex;justify-content:space-between;font-size:9px;color:var(--text-3);font-weight:700;margin-top:3px }

/* ── INFO / FAQ ───────────────────────────────────────────── */
.info-sec { max-width:1280px;margin:0 auto;padding:36px 24px 12px }
.info-sec h2 {
  font-family:'Bricolage Grotesque',sans-serif;
  font-size:22px;font-weight:800;letter-spacing:-.4px;
  margin-bottom:14px;color:var(--text);
}
.info-sec p { font-size:14px;color:var(--text-2);line-height:1.8;margin-bottom:14px }
.info-sec h3 { font-family:'Bricolage Grotesque',sans-serif;font-size:15px;font-weight:700;color:var(--text);margin:20px 0 8px }
.info-sec ul, .info-sec ol { padding-left:20px;margin-bottom:14px }
.info-sec li { font-size:14px;color:var(--text-2);line-height:1.7;margin-bottom:4px }
.faq-list { display:flex;flex-direction:column;gap:8px;margin-top:22px }
.faq-item {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:12px;padding:18px 20px;
  transition:border-color .15s,box-shadow .15s;
}
.faq-item:hover { border-color:rgba(249,115,22,.3);box-shadow:var(--sh1) }
.faq-item h3 { font-family:'Bricolage Grotesque',sans-serif;font-size:14px;font-weight:700;margin-bottom:7px;color:var(--text) }
.faq-item p  { font-size:13px;color:var(--text-2);line-height:1.65;margin:0 }

/* ── GUIDE PAGES ─────────────────────────────────────────── */
.guide-body { max-width:720px;margin:0 auto;padding:56px 24px 80px }
.guide-body h1 {
  font-family:'Bricolage Grotesque',sans-serif;
  font-size:clamp(1.8rem,4vw,2.8rem);
  font-weight:800;letter-spacing:-.04em;
  line-height:1.12;margin-bottom:20px;
  color:var(--text);
}
.guide-body h2 {
  font-family:'Bricolage Grotesque',sans-serif;
  font-size:1.3rem;font-weight:800;letter-spacing:-.025em;
  margin:36px 0 12px;color:var(--text);
}
.guide-body h3 {
  font-family:'Bricolage Grotesque',sans-serif;
  font-size:1.05rem;font-weight:700;margin:24px 0 8px;color:var(--text);
}
.guide-body p    { font-size:15px;color:var(--text-2);line-height:1.8;margin-bottom:16px }
.guide-body ul, .guide-body ol { padding-left:22px;margin-bottom:16px }
.guide-body li   { font-size:15px;color:var(--text-2);line-height:1.75;margin-bottom:6px }
.guide-body strong { color:var(--text);font-weight:700 }
.guide-body .guide-meta {
  font-size:13px;color:var(--text-3);margin-bottom:36px;
  display:flex;gap:16px;align-items:center;flex-wrap:wrap;
}
.guide-body .guide-meta span { display:flex;align-items:center;gap:5px }
.guide-cta-box {
  background:var(--accent-light);
  border:1px solid rgba(249,115,22,.2);
  border-radius:14px;padding:24px;margin:32px 0;
  text-align:center;
}
.guide-cta-box p { margin-bottom:14px;color:var(--text-2) }
.guide-cta-box a {
  display:inline-block;
  background:var(--accent);
  color:#fff;text-decoration:none;
  padding:11px 28px;border-radius:100px;
  font-size:14px;font-weight:700;
  box-shadow:0 2px 12px rgba(249,115,22,.28);
  transition:background .15s,transform .2s,box-shadow .2s;
}
.guide-cta-box a:hover { background:var(--accent-dark);transform:translateY(-2px);box-shadow:0 6px 20px rgba(249,115,22,.38) }

/* ── FOOTER ──────────────────────────────────────────────── */
footer {
  background:var(--text);
  color:rgba(255,255,255,.45);
  padding:44px 24px;margin-top:64px;
}
.ftr {
  max-width:1280px;margin:0 auto;
  display:flex;flex-wrap:wrap;gap:24px;
  align-items:flex-start;justify-content:space-between;
}
.flogo {
  font-family:'Bricolage Grotesque',sans-serif;
  font-size:20px;font-weight:800;
  color:#fff;
  letter-spacing:-.4px;display:flex;align-items:center;gap:8px;
}
.flogo::before {
  content:'m';
  width:28px;height:28px;
  background:var(--accent);
  border-radius:7px;
  display:flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:800;color:#fff;
}
.fp { font-size:12px;max-width:380px;line-height:1.7;color:rgba(255,255,255,.4) }
.fp .lk { color:rgba(255,255,255,.75) }
.flinks { display:flex;flex-wrap:wrap;gap:6px 16px }
.flinks a {
  color:rgba(255,255,255,.4);font-size:12px;text-decoration:none;font-weight:500;
  transition:color .15s;
}
.flinks a:hover { color:#fff }
footer p:last-child { font-size:12px;color:rgba(255,255,255,.25);width:100% }

/* ── RESPONSIVE ──────────────────────────────────────────── */
@media(max-width:1100px) { .tools-grid{grid-template-columns:repeat(3,1fr)} }
@media(max-width:820px) {
  .tools-grid{grid-template-columns:repeat(2,1fr)}
  .cbody{grid-template-columns:1fr}
  .hero-inner { flex-direction:column;align-items:flex-start;gap:4px }
  .hero p { display:none }
}
@media(max-width:600px) {
  .hero { padding:14px 16px 12px }
  .hero h1 { font-size:1.1rem }
  .tools-grid { grid-template-columns:repeat(2,1fr);gap:8px }
  .hdr { padding:0 16px }
  .cbody,.chdr { padding:16px }
  .sec { padding:22px 16px 0 }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    transition-duration:.01ms!important;
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
  }
}