/* ===================================================================
   SmartlyTools v2 — Layout
   Header + mega menu, mobile drawer accordion, bottom nav,
   footer, hero, grids, breadcrumbs.
   =================================================================== */

/* ============ HEADER ============ */
.site-header {
  position:sticky; top:0; z-index:var(--z-header);
  background:transparent;
  transition:background var(--t) var(--ease),box-shadow var(--t) var(--ease),border-color var(--t) var(--ease);
}
.site-header::before {
  content:""; position:absolute; inset:0; z-index:-1; opacity:0;
  background:var(--glass-bg); -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
  border-bottom:1px solid transparent; transition:opacity var(--t) var(--ease),border-color var(--t) var(--ease);
}
.site-header.scrolled::before { opacity:1; border-bottom-color:var(--hairline); box-shadow:var(--sh-sm); }
.header-inner {
  max-width:var(--maxw-wide); margin-inline:auto; height:var(--header-h);
  padding-inline:clamp(1rem,4vw,2rem);
  display:flex; align-items:center; gap:var(--sp-5);
}

.logo { display:inline-flex; align-items:center; gap:.6rem; font-family:var(--font-display); font-weight:700; font-size:var(--fs-lg); color:var(--ink); letter-spacing:var(--tracking-tight); }
.logo:hover { color:var(--ink); }
.logo b { color:var(--primary); font-weight:800; }
.logo-mark {
  display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px;
  border-radius:11px; color:#fff; background:var(--grad-brand);
  box-shadow:var(--sh-primary-sm); transition:transform var(--t) var(--ease-spring);
}
.logo-mark svg { width:22px; height:22px; }
.logo:hover .logo-mark { transform:rotate(-8deg) scale(1.05); }

/* Primary nav */
.nav { display:flex; align-items:center; gap:.15rem; margin-right:auto; }
.nav > a,.nav > .has-mega > button {
  display:inline-flex; align-items:center; gap:.3rem;
  padding:.55rem .8rem; border-radius:var(--r-sm);
  font-size:var(--fs-sm); font-weight:600; color:var(--ink-soft);
  transition:color var(--t) var(--ease),background var(--t) var(--ease);
}
.nav > a:hover,.nav > .has-mega:hover > button,.nav > a.active { color:var(--primary); background:var(--primary-soft); }
.nav .caret { width:15px; height:15px; transition:transform var(--t) var(--ease); }
.nav .has-mega:hover .caret { transform:rotate(180deg); }

/* Header actions */
.header-actions { display:flex; align-items:center; gap:.3rem; }
.header-search-pill {
  display:inline-flex; align-items:center; gap:.6rem; height:42px; padding:0 .9rem;
  border-radius:var(--r-pill); background:var(--surface-2); border:1px solid var(--hairline);
  color:var(--ink-faint); font-size:var(--fs-sm); cursor:pointer; min-width:190px;
  transition:border-color var(--t) var(--ease),background var(--t) var(--ease),box-shadow var(--t) var(--ease);
}
.header-search-pill:hover { border-color:var(--hairline-2); box-shadow:var(--sh-sm); }
.header-search-pill svg { width:18px; height:18px; }
.header-search-pill .kbd { margin-left:auto; font-family:var(--font-mono); font-size:11px; padding:.1rem .4rem; border-radius:5px; background:var(--surface-3); border:1px solid var(--hairline); color:var(--ink-faint); }

/* ============ MEGA MENU ============ */
.has-mega { position:static; }
.mega {
  position:absolute; left:50%; top:calc(var(--header-h) - 6px); transform:translateX(-50%) translateY(10px);
  width:min(1080px,calc(100vw - 2rem)); z-index:var(--z-mega);
  background:var(--glass-bg-strong); -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
  border:1px solid var(--hairline); border-radius:var(--r-xl); box-shadow:var(--sh-xl);
  padding:var(--sp-5); opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity var(--t) var(--ease),transform var(--t) var(--ease-out),visibility var(--t);
}
.has-mega:hover .mega,.has-mega:focus-within .mega,.mega.open { opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0); }
.mega-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-3) var(--sp-4); }
.mega-cat { display:flex; flex-direction:column; gap:.5rem; padding:var(--sp-3); border-radius:var(--r-md); transition:background var(--t) var(--ease); }
.mega-cat:hover { background:var(--surface-2); }
.mega-cat-head { display:flex; align-items:center; gap:.5rem; color:var(--ink); }
.mega-ico { display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:var(--r-sm); color:#fff; background:linear-gradient(135deg,var(--cat-color),color-mix(in srgb,var(--cat-color) 55%,#000 6%)); flex-shrink:0; }
.mega-ico svg { width:19px; height:19px; }
.mega-cat-head strong { font-family:var(--font-display); font-size:var(--fs-sm); }
.mega-cat-desc { font-size:var(--fs-xs); color:var(--ink-faint); line-height:1.4; min-height:2.4em; }
.mega-links { display:flex; flex-direction:column; gap:.1rem; margin-top:.2rem; }
.mega-links a { font-size:var(--fs-sm); color:var(--ink-soft); padding:.3rem .4rem; border-radius:var(--r-xs); transition:color var(--t-fast) var(--ease),background var(--t-fast) var(--ease); }
.mega-links a:hover { color:var(--cat-color); background:color-mix(in srgb,var(--cat-color) 9%,transparent); }
.mega-links a .dot { display:none; }
.mega-cat-all { font-size:var(--fs-xs); font-weight:700; color:var(--cat-color); margin-top:.2rem; }
.mega-foot { display:flex; align-items:center; justify-content:space-between; margin-top:var(--sp-4); padding-top:var(--sp-4); border-top:1px solid var(--hairline); }
.mega-foot span { font-size:var(--fs-sm); color:var(--ink-soft); }

/* ============ HAMBURGER ============ */
.hamburger { display:none; width:42px; height:42px; border-radius:var(--r-md); align-items:center; justify-content:center; flex-direction:column; gap:5px; }
.hamburger span { display:block; width:20px; height:2px; border-radius:2px; background:var(--ink); transition:transform var(--t) var(--ease),opacity var(--t-fast) var(--ease); }
.hamburger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg) }
.hamburger[aria-expanded="true"] span:nth-child(2){ opacity:0 }
.hamburger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg) }

/* ============ MOBILE DRAWER (slide-out + accordion) ============ */
.mobile-drawer {
  position:fixed; top:0; right:0; bottom:0; z-index:var(--z-drawer);
  width:min(360px,86vw); padding:calc(var(--header-h) + 1rem) var(--sp-5) var(--sp-6);
  background:var(--surface); border-left:1px solid var(--hairline); box-shadow:var(--sh-xl);
  transform:translateX(100%); transition:transform var(--t-slow) var(--ease-out), visibility var(--t-slow);
  overflow-y:auto; overscroll-behavior:contain; display:flex; flex-direction:column; gap:.4rem;
  visibility:hidden;
}
.mobile-drawer.open { transform:none; visibility:visible; }
.drawer-backdrop { position:fixed; inset:0; z-index:var(--z-backdrop); background:rgba(11,15,26,.5); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); opacity:0; visibility:hidden; transition:opacity var(--t) var(--ease),visibility var(--t); }
.drawer-backdrop.open { opacity:1; visibility:visible; }
.drawer-link { display:flex; align-items:center; gap:.7rem; padding:.85rem .9rem; border-radius:var(--r-md); font-weight:600; font-size:var(--fs-md); color:var(--ink); transition:background var(--t-fast) var(--ease); }
.drawer-link:hover,.drawer-link.active { background:var(--primary-soft); color:var(--primary); }
.drawer-link svg { width:20px; height:20px; color:var(--ink-faint); }
.drawer-acc { border-radius:var(--r-md); overflow:hidden; }
.drawer-acc summary { display:flex; align-items:center; gap:.7rem; padding:.85rem .9rem; border-radius:var(--r-md); font-weight:600; font-size:var(--fs-md); color:var(--ink); cursor:pointer; list-style:none; transition:background var(--t-fast) var(--ease); }
.drawer-acc summary::-webkit-details-marker { display:none; }
.drawer-acc summary:hover { background:var(--surface-2); }
.drawer-acc summary .acc-ico { margin-left:auto; transition:transform var(--t) var(--ease); width:18px; height:18px; color:var(--ink-faint); }
.drawer-acc[open] summary .acc-ico { transform:rotate(180deg); }
.drawer-acc .acc-body { padding:.2rem .5rem .6rem 2.5rem; display:flex; flex-direction:column; gap:.05rem; }
.drawer-acc .acc-body a { padding:.55rem .6rem; border-radius:var(--r-sm); font-size:var(--fs-sm); color:var(--ink-soft); }
.drawer-acc .acc-body a:hover { color:var(--primary); background:var(--primary-soft); }
.drawer-acc .cat-dot { width:9px; height:9px; border-radius:50%; background:var(--cat-color,var(--primary)); }
.drawer-divider { height:1px; background:var(--hairline); margin:.5rem 0; }
.drawer-cta { margin-top:.6rem; }

/* ============ BOTTOM NAV (mobile) ============ */
.bottom-nav {
  display:none; position:fixed; left:0; right:0; bottom:0; z-index:var(--z-sticky);
  height:var(--bottomnav-h); padding-bottom:env(safe-area-inset-bottom);
  background:var(--glass-bg-strong); -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
  border-top:1px solid var(--hairline);
  grid-template-columns:repeat(4,1fr); align-items:center;
}
.bottom-nav a { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; font-size:10px; font-weight:600; color:var(--ink-faint); height:100%; transition:color var(--t-fast) var(--ease); }
.bottom-nav a svg { width:22px; height:22px; }
.bottom-nav a.active,.bottom-nav a:hover { color:var(--primary); }
.bottom-nav a.fab { margin-top:-18px; }
.bottom-nav a.fab .fab-circle { display:flex; align-items:center; justify-content:center; width:48px; height:48px; border-radius:50%; background:var(--grad-brand); color:#fff; box-shadow:var(--sh-primary); margin-bottom:1px; }
.bottom-nav a.fab .fab-circle svg { width:24px; height:24px; }

/* ============ HERO ============ */
.hero { position:relative; padding-block:clamp(3rem,8vw,7rem) clamp(2.5rem,6vw,5rem); overflow:hidden; isolation:isolate; }
.hero-bg { position:absolute; inset:0; z-index:-2; background:var(--grad-hero); }
.hero-grid-overlay { position:absolute; inset:0; z-index:-2; opacity:.5;
  background-image:linear-gradient(var(--hairline) 1px,transparent 1px),linear-gradient(90deg,var(--hairline) 1px,transparent 1px);
  background-size:46px 46px; -webkit-mask-image:radial-gradient(70% 60% at 50% 30%,#000,transparent 75%); mask-image:radial-gradient(70% 60% at 50% 30%,#000,transparent 75%); }
.hero-orbs { position:absolute; inset:0; z-index:-1; pointer-events:none; overflow:hidden; }
.orb { position:absolute; border-radius:50%; filter:blur(38px); opacity:.5; }
.orb-1 { width:340px; height:340px; left:-40px; top:-40px; background:radial-gradient(circle,var(--indigo-400),transparent 70%); animation:float1 14s var(--ease) infinite; }
.orb-2 { width:280px; height:280px; right:-30px; top:40px; background:radial-gradient(circle,var(--teal-400),transparent 70%); animation:float2 17s var(--ease) infinite; }
.orb-3 { width:240px; height:240px; left:40%; bottom:-80px; background:radial-gradient(circle,var(--pink-500),transparent 70%); animation:float3 20s var(--ease) infinite; }
@media (max-width:640px){
  .orb-1 { width:200px; height:200px; left:-60px; }
  .orb-2 { width:180px; height:180px; right:-50px; }
  .orb-3 { width:160px; height:160px; }
}
@keyframes float1 { 50%{ transform:translate(40px,30px) scale(1.1) } }
@keyframes float2 { 50%{ transform:translate(-34px,26px) scale(1.08) } }
@keyframes float3 { 50%{ transform:translate(24px,-30px) scale(1.12) } }
.hero-shape { position:absolute; z-index:-1; opacity:.6; animation:spin-slow 26s linear infinite; }
.hero-shape.s1 { top:18%; right:12%; width:48px; height:48px; color:var(--indigo-300); }
.hero-shape.s2 { bottom:24%; left:10%; width:36px; height:36px; color:var(--teal-400); animation-duration:32s; animation-direction:reverse; }
.hero-shape.s3 { top:30%; left:16%; width:26px; height:26px; color:var(--pink-500); animation-duration:20s; }
@keyframes spin-slow { to{ transform:rotate(360deg) } }
.hero-inner { position:relative; text-align:center; max-width:860px; margin-inline:auto; }
.hero h1 { margin-block:var(--sp-4) var(--sp-4); }
.hero-sub { font-size:var(--fs-lg); color:var(--ink-soft); max-width:620px; margin:0 auto var(--sp-6); }
.hero-shortcuts { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:.5rem; margin-top:var(--sp-5); }
.hero-shortcuts .label { font-size:var(--fs-sm); font-weight:600; color:var(--ink-faint); }
.hero-stats { display:flex; flex-wrap:wrap; justify-content:center; gap:clamp(1.5rem,5vw,3.5rem); margin-top:var(--sp-7); }
.hero-stats .stat { text-align:center; }
.hero-stats .num { font-family:var(--font-display); font-size:var(--fs-3xl); font-weight:800; background:var(--grad-text); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; line-height:1; }
.hero-stats .lbl { font-size:var(--fs-xs); color:var(--ink-faint); text-transform:uppercase; letter-spacing:.06em; font-weight:600; margin-top:.4rem; }
.trust-row { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:.5rem 1.5rem; margin-top:var(--sp-6); color:var(--ink-faint); font-size:var(--fs-sm); }
.trust-row .ti { display:inline-flex; align-items:center; gap:.4rem; }
.trust-row .ti svg { width:18px; height:18px; color:var(--success); }

/* ============ GRIDS ============ */
.grid-tools { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,270px),1fr)); gap:var(--sp-4); }
.grid-cats { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr)); gap:var(--sp-4); }
.grid-3 { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); gap:var(--sp-4); }
.related-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr)); gap:var(--sp-4); }

/* ============ PAGE LAYOUT (tool/sidebar) ============ */
.page-grid { display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:var(--sp-6); align-items:start; }
.page-sidebar { position:sticky; top:calc(var(--header-h) + var(--sp-4)); display:flex; flex-direction:column; gap:var(--sp-4); }
.sidebar-card h3 { font-size:var(--fs-md); margin-bottom:var(--sp-3); }
.sidebar-links { display:flex; flex-direction:column; gap:.1rem; }
.sidebar-links a { display:flex; align-items:center; gap:.5rem; padding:.55rem .7rem; border-radius:var(--r-sm); font-size:var(--fs-sm); color:var(--ink-soft); transition:color var(--t-fast) var(--ease),background var(--t-fast) var(--ease); }
.sidebar-links a:hover { color:var(--primary); background:var(--primary-soft); }
.sidebar-links a.current { color:var(--primary); background:var(--primary-soft); font-weight:600; }

/* ============ BREADCRUMB ============ */
.breadcrumb { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; padding-block:var(--sp-5) 0; font-size:var(--fs-sm); color:var(--ink-faint); }
.breadcrumb a { color:var(--ink-soft); font-weight:500; }
.breadcrumb a:hover { color:var(--primary); }
.breadcrumb span[aria-current] { color:var(--ink); font-weight:600; }
.breadcrumb > span:not([aria-current]) { color:var(--hairline-2); }

/* ============ FOOTER ============ */
.site-footer { margin-top:var(--sp-9); padding-block:var(--sp-8) var(--sp-6); background:var(--surface); border-top:1px solid var(--hairline); position:relative; }
.site-footer::before { content:""; position:absolute; inset:0 0 auto 0; height:3px; background:var(--grad-brand); }
.footer-grid { display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr 1.2fr; gap:var(--sp-6); padding-bottom:var(--sp-6); }
.footer-brand p { color:var(--ink-soft); font-size:var(--fs-sm); margin-top:var(--sp-3); max-width:30ch; }
.footer-col h4 { font-size:var(--fs-sm); text-transform:uppercase; letter-spacing:.06em; color:var(--ink-faint); margin-bottom:var(--sp-3); }
.footer-col ul { display:flex; flex-direction:column; gap:.55rem; }
.footer-col a { color:var(--ink-soft); font-size:var(--fs-sm); transition:color var(--t-fast) var(--ease),padding-left var(--t-fast) var(--ease); }
.footer-col a:hover { color:var(--primary); padding-left:3px; }
.footer-news { display:flex; gap:.4rem; margin-top:var(--sp-4); }
.footer-news input { flex:1; min-width:0; padding:.6rem .8rem; font-size:var(--fs-sm); background:var(--surface-2); border:1px solid var(--hairline); border-radius:var(--r-sm); color:var(--ink); }
.footer-news input:focus { outline:none; border-color:var(--primary); box-shadow:var(--ring); }
.footer-bottom { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--sp-3); padding-top:var(--sp-5); border-top:1px solid var(--hairline); color:var(--ink-faint); font-size:var(--fs-sm); }
.social-links { display:flex; gap:.5rem; }
.social-links a { display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:var(--r-md); background:var(--surface-2); border:1px solid var(--hairline); color:var(--ink-soft); transition:transform var(--t-fast) var(--ease),color var(--t) var(--ease),background var(--t) var(--ease); }
.social-links a:hover { transform:translateY(-3px); color:#fff; background:var(--primary); border-color:var(--primary); }
.social-links a svg { width:18px; height:18px; }

/* ============ BACK TO TOP ============ */
.back-top { position:fixed; right:1.2rem; bottom:calc(var(--bottomnav-h) + 1rem); z-index:var(--z-sticky); width:46px; height:46px; border-radius:50%; background:var(--grad-brand); color:#fff; box-shadow:var(--sh-primary); display:flex; align-items:center; justify-content:center; font-size:1.3rem; opacity:0; visibility:hidden; transform:translateY(12px); transition:opacity var(--t) var(--ease),transform var(--t) var(--ease-spring),visibility var(--t); }
.back-top.show { opacity:1; visibility:visible; transform:none; }
.back-top:hover { transform:translateY(-3px) scale(1.05); color:#fff; }
@media (min-width:721px){ .back-top { bottom:1.5rem; right:1.5rem; } }

/* ============ RESPONSIVE ============ */
@media (max-width:1080px){ .footer-grid { grid-template-columns:1.4fr 1fr 1fr; } .footer-brand { grid-column:1/-1; } }
@media (max-width:980px){
  .nav { display:none; }
  .hamburger { display:flex; }
  .header-search-pill { min-width:0; }
  .header-search-pill .pill-text,.header-search-pill .kbd { display:none; }
  .header-search-pill { width:42px; justify-content:center; padding:0; }
  .page-grid { grid-template-columns:1fr; }
  .page-sidebar { position:static; }
}
@media (max-width:720px){
  :root { --header-h:60px; }
  .io-grid { grid-template-columns:1fr; }
  .form-grid-2 { grid-template-columns:1fr; }
  .bottom-nav { display:grid; }
  body { padding-bottom:var(--bottomnav-h); }
  .footer-grid { grid-template-columns:1fr 1fr; }
  .footer-bottom { justify-content:center; text-align:center; }
  .hero-stats { gap:1.5rem 2.5rem; }
}
@media (max-width:480px){ .footer-grid { grid-template-columns:1fr; } .hero-stats .stat:nth-child(n+3){ display:none } }

/* Mega menu density for 8 categories */
@media (max-width:1180px){ .mega { width:min(820px,calc(100vw - 2rem)); } .mega-grid { grid-template-columns:repeat(3,1fr); } }