/* ==========================================================================
   TOOLSHORE — main.css
   Fonts: Playfair Display (headings, editorial feel) + Inter (body).
   Violet hero band with animated blobs, hover-tilt cards, drag carousels.
   ========================================================================== */

:root{
  --bg:        #FAFAFC;
  --panel:     #FFFFFF;
  --ink:       #14151A;
  --ink-soft:  #61636D;
  --line:      #E7E5F0;
  --violet:    #EDE9FE;
  --violet-deep: #6D5BD0;
  --amber:     #FFB020;
  --amber-ink: #6B4400;
  --steel:     #335B7A;
  --radius:    14px;
  --mono: 'IBM Plex Mono', 'Courier New', monospace;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --disp: 'Playfair Display', Georgia, serif;
  --ease: cubic-bezier(.4,0,.2,1);
  --bounce: cubic-bezier(.34,1.56,.64,1);
}

[data-theme="dark"]{
  --bg:        #0E0F13;
  --panel:     #1A1B22;
  --ink:       #F2F1F6;
  --ink-soft:  #9A9CA6;
  --line:      #2A2C36;
  --violet:    #221C3E;
  --violet-deep: #A594F9;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--sans);
  background:var(--bg);
  color:var(--ink);
  line-height:1.6;
  transition:background .25s var(--ease), color .25s var(--ease);
  overflow-x:hidden;
}
a{color:inherit; text-decoration:none;}
ul{list-style:none;}
img{max-width:100%; display:block;}

.sr-only{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap;
}
.skip-link{
  position:absolute; left:-999px; top:0; background:var(--ink); color:var(--bg);
  padding:10px 16px; z-index:200; border-radius:0 0 8px 0;
}
.skip-link:focus{left:0;}

/* ===== HEADER ===== */
.site-header{
  background:color-mix(in srgb, var(--panel) 92%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:50;
  transition:box-shadow .25s var(--ease);
}
.site-header.is-scrolled{ box-shadow:0 6px 24px rgba(20,21,26,.06); }
.header-inner{
  max-width:1200px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 24px;
}
.logo{
  font-family:var(--disp); font-weight:800; font-size:21px; letter-spacing:-.3px;
  display:flex; align-items:center; gap:8px;
}
.logo-dot{
  width:9px; height:9px; background:var(--amber); border-radius:2px;
  display:inline-block; transform:rotate(45deg);
  transition:transform .4s var(--bounce);
}
.logo:hover .logo-dot{ transform:rotate(225deg) scale(1.3); }
.main-nav{display:flex; gap:26px; font-size:14px; font-weight:600;}
.main-nav a{
  color:var(--ink-soft); position:relative; padding:4px 0;
  transition:color .15s var(--ease);
}
.main-nav a::after{
  content:''; position:absolute; left:0; bottom:0; width:0; height:2px;
  background:var(--violet-deep); transition:width .25s var(--ease);
}
.main-nav a:hover{color:var(--ink);}
.main-nav a:hover::after{width:100%;}
.header-actions{display:flex; align-items:center; gap:10px;}
.icon-btn{
  background:var(--bg); border:1px solid var(--line); border-radius:9px;
  width:36px; height:36px; font-size:15px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:transform .2s var(--bounce), border-color .15s var(--ease);
}
.icon-btn:hover{border-color:var(--violet-deep); transform:translateY(-2px) rotate(-6deg);}
.menu-btn{display:none;}

.mobile-nav{ background:var(--panel); border-top:1px solid var(--line); }
.mobile-nav:not([hidden]){ display:flex; flex-direction:column; padding:8px 24px 16px; }
.mobile-nav a{ padding:10px 0; font-weight:600; font-size:14.5px; border-bottom:1px solid var(--line); }
.mobile-nav a:last-child{ border-bottom:none; }
@media (min-width:721px){ .mobile-nav{ display:none !important; } }

/* ===== BREADCRUMBS ===== */
.breadcrumbs{max-width:1200px; margin:0 auto; padding:14px 24px 0;}
.breadcrumbs ol{display:flex; flex-wrap:wrap; gap:6px; font-size:12.5px; color:var(--ink-soft);}
.breadcrumbs li:not(:last-child)::after{content:'/'; margin-left:6px; color:var(--line);}
.breadcrumbs a:hover{color:var(--violet-deep);}

/* ===== HERO ===== */
.hero{
  position:relative; overflow:hidden;
  background:linear-gradient(180deg, var(--violet) 0%, var(--bg) 100%);
  padding:70px 24px 44px; text-align:center;
}
.hero-blob{
  position:absolute; border-radius:50%; filter:blur(50px); opacity:.5;
  pointer-events:none; z-index:0;
}
.hero-blob-1{
  width:340px; height:340px; background:var(--amber);
  top:-140px; left:-80px; opacity:.25;
  animation:float-a 14s ease-in-out infinite;
}
.hero-blob-2{
  width:280px; height:280px; background:var(--violet-deep);
  bottom:-120px; right:-60px; opacity:.25;
  animation:float-b 16s ease-in-out infinite;
}
@keyframes float-a{
  0%,100%{ transform:translate(0,0) scale(1); }
  50%{ transform:translate(30px,40px) scale(1.1); }
}
@keyframes float-b{
  0%,100%{ transform:translate(0,0) scale(1); }
  50%{ transform:translate(-30px,-20px) scale(1.15); }
}
@media (prefers-reduced-motion: reduce){
  .hero-blob{ animation:none; }
}

.hero > *{ position:relative; z-index:1; }
.eyebrow{
  font-family:var(--mono); font-size:12px; color:var(--violet-deep);
  letter-spacing:1.2px; text-transform:uppercase; margin-bottom:18px;
  display:inline-flex; align-items:center; gap:8px;
}
.eyebrow::before{content:''; width:16px; height:2px; background:var(--amber);}
.hero h1{
  font-family:var(--disp); font-weight:800; font-size:50px; line-height:1.1;
  letter-spacing:-1px; max-width:700px; margin:0 auto 18px;
}
.hero h1 span{color:var(--violet-deep); font-style:italic;}
.hero-sub{
  font-size:16.5px; color:var(--ink-soft); max-width:520px; margin:0 auto 34px;
}

.toolbelt{
  background:var(--ink); border-radius:999px; padding:6px 6px 6px 18px;
  max-width:560px; margin:0 auto; display:flex; align-items:center; gap:10px;
  box-shadow:0 12px 30px rgba(20,21,26,.2);
  transition:box-shadow .25s var(--ease), transform .25s var(--ease);
}
.toolbelt:focus-within{ box-shadow:0 16px 36px rgba(109,91,208,.35); transform:translateY(-2px); }
.toolbelt .prompt{font-family:var(--mono); color:var(--amber); font-size:15px;}
.toolbelt input{
  flex:1; background:none; border:none; outline:none; color:#fff;
  font-family:var(--mono); font-size:14.5px; padding:12px 0;
}
.toolbelt input::placeholder{color:#8B8D97;}
.toolbelt button{
  background:var(--amber); color:var(--amber-ink); border:none; font-weight:700;
  font-family:var(--sans); font-size:13px; padding:10px 18px; border-radius:999px; cursor:pointer;
  transition:transform .2s var(--bounce);
}
.toolbelt button:hover{transform:translateY(-2px) scale(1.04);}
.search-count{font-size:12.5px; color:var(--ink-soft); margin-top:12px; font-family:var(--mono);}

/* ===== CATEGORY CARDS ===== */
.categories{
  max-width:1200px; margin:0 auto; padding:8px 24px 48px;
  display:grid; grid-template-columns:repeat(6,1fr); gap:12px;
}
.cat-card{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:20px 16px; position:relative; overflow:hidden;
  transition:transform .3s var(--bounce), border-color .2s var(--ease), box-shadow .3s var(--ease);
}
.cat-card::before{
  content:''; position:absolute; inset:0; opacity:0;
  background:linear-gradient(135deg, var(--violet) 0%, transparent 60%);
  transition:opacity .3s var(--ease);
}
.cat-card:hover{
  transform:translateY(-5px) scale(1.02);
  border-color:var(--violet-deep);
  box-shadow:0 14px 30px rgba(109,91,208,.16);
}
.cat-card:hover::before{ opacity:1; }
.cat-icon{
  font-size:22px; display:block; margin-bottom:12px; position:relative;
  transition:transform .3s var(--bounce);
}
.cat-card:hover .cat-icon{ transform:scale(1.2) rotate(-6deg); }
.cat-card h3{font-family:var(--disp); font-size:15.5px; font-weight:700; margin-bottom:4px; position:relative;}
.cat-card p{font-size:11.5px; color:var(--ink-soft); position:relative;}
.cat-arrow{
  position:absolute; top:16px; right:16px; opacity:0; font-size:14px; color:var(--violet-deep);
  transition:opacity .25s var(--ease), transform .25s var(--ease);
}
.cat-card:hover .cat-arrow{ opacity:1; transform:translateX(3px); }

/* ===== TOOL SECTIONS / CAROUSEL ===== */
.section{max-width:1200px; margin:0 auto; padding:8px 24px 44px; scroll-margin-top:90px;}
.section-head{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:18px; padding-bottom:10px; border-bottom:2px solid var(--ink);
}
.section-head h2{font-family:var(--disp); font-size:23px; font-weight:800; letter-spacing:-.3px;}
.carousel-controls{display:flex; align-items:center; gap:10px;}
.section-count{font-family:var(--mono); font-size:12px; color:var(--ink-soft);}
.carousel-btn{
  width:30px; height:30px; border-radius:50%; border:1px solid var(--line);
  background:var(--panel); cursor:pointer; font-size:16px; line-height:1;
  display:flex; align-items:center; justify-content:center;
  transition:transform .2s var(--bounce), background .2s var(--ease), border-color .2s var(--ease);
}
.carousel-btn:hover{ background:var(--violet-deep); color:#fff; border-color:var(--violet-deep); transform:scale(1.1); }

.tool-carousel{
  display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x proximity;
  padding-bottom:6px; cursor:grab;
  scrollbar-width:thin; scrollbar-color:var(--line) transparent;
}
.tool-carousel:active{ cursor:grabbing; }
.tool-carousel.dragging{ scroll-snap-type:none; }
.tool-carousel::-webkit-scrollbar{ height:6px; }
.tool-carousel::-webkit-scrollbar-thumb{ background:var(--line); border-radius:4px; }

.tool-card{
  flex:0 0 240px; scroll-snap-align:start;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:18px; display:flex; flex-direction:column; gap:8px;
  transition:transform .25s var(--bounce), border-color .2s var(--ease), box-shadow .25s var(--ease);
}
.tool-card:hover{
  transform:translateY(-5px) rotate(-0.5deg);
  border-color:var(--violet-deep);
  box-shadow:0 16px 30px rgba(20,21,26,.1);
}
.tool-icon{
  width:36px; height:36px; border-radius:9px; background:var(--violet);
  display:flex; align-items:center; justify-content:center; font-size:16px;
  transition:transform .3s var(--bounce);
}
.tool-card:hover .tool-icon{ transform:scale(1.15) rotate(6deg); }
.tool-card h4{font-family:var(--disp); font-size:15px; font-weight:700;}
.tool-card p{font-size:12px; color:var(--ink-soft); flex:1;}
.tool-card .use{font-family:var(--mono); font-size:10.5px; color:var(--steel); font-weight:600;}
.tool-card[hidden]{display:none;}
.no-results{text-align:center; padding:40px 24px; color:var(--ink-soft); font-family:var(--mono); font-size:13px;}

/* ===== FAQ ===== */
.faq{background:var(--panel); border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:52px 24px;}
.faq-inner{max-width:720px; margin:0 auto;}
.faq h2{font-family:var(--disp); font-size:23px; margin-bottom:18px;}
.faq-item{border-bottom:1px solid var(--line); padding:16px 0; transition:padding-left .2s var(--ease);}
.faq-item:hover{ padding-left:6px; border-color:var(--violet-deep); }
.faq-item .q{font-weight:700; font-size:14px;}
.faq-item .a{font-size:13px; color:var(--ink-soft); margin-top:6px;}

/* ===== NEWSLETTER ===== */
.newsletter{
  max-width:1200px; margin:0 auto 44px; padding:0 24px;
}
.newsletter-inner{
  background:var(--ink); color:#fff; border-radius:20px;
  padding:36px 40px; display:flex; align-items:center; justify-content:space-between;
  gap:24px; flex-wrap:wrap; position:relative; overflow:hidden;
}
.newsletter-inner::before{
  content:''; position:absolute; top:-60px; right:-60px; width:200px; height:200px;
  background:var(--amber); border-radius:50%; opacity:.15; filter:blur(30px);
}
.newsletter h3{font-family:var(--disp); font-size:22px; margin-bottom:6px;}
.newsletter p{font-size:13px; color:#B8B9C4; max-width:320px;}
.newsletter-form{display:flex; gap:8px; position:relative;}
.newsletter-form input{
  padding:12px 16px; border-radius:999px; border:1px solid #33343E;
  background:#1E1F26; color:#fff; font-size:13.5px; min-width:220px; outline:none;
  transition:border-color .2s var(--ease);
}
.newsletter-form input:focus{ border-color:var(--amber); }
.newsletter-form button{
  background:var(--amber); color:var(--amber-ink); border:none; font-weight:700;
  font-size:13px; padding:12px 22px; border-radius:999px; cursor:pointer;
  transition:transform .2s var(--bounce);
}
.newsletter-form button:hover{ transform:translateY(-2px) scale(1.04); }

/* ===== FOOTER ===== */
.site-footer{padding:0 24px 20px; max-width:1200px; margin:0 auto;}
.footer-inner{display:flex; flex-wrap:wrap; gap:40px; margin-bottom:32px;}
.footer-brand{max-width:220px;}
.footer-brand p{font-size:12.5px; color:var(--ink-soft); margin-top:8px;}
.footer-social{display:flex; gap:8px; margin-top:14px;}
.footer-social a{
  width:32px; height:32px; border-radius:50%; border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; font-size:12px;
  transition:transform .2s var(--bounce), background .2s var(--ease), color .2s var(--ease);
}
.footer-social a:hover{ background:var(--violet-deep); color:#fff; transform:translateY(-3px); }
.footer-columns{display:grid; grid-template-columns:repeat(6,1fr); gap:20px; flex:1;}
.footer-col h4{font-size:12.5px; font-weight:700; margin-bottom:10px;}
.footer-col ul{max-height:260px; overflow:hidden;}
.footer-col li{margin-bottom:6px;}
.footer-col a{font-size:11.5px; color:var(--ink-soft); transition:color .15s var(--ease), padding-left .15s var(--ease);}
.footer-col a:hover{color:var(--violet-deep); padding-left:3px;}
.footer-bottom{
  border-top:1px solid var(--line); padding-top:16px;
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px;
  font-size:12px; color:var(--ink-soft);
}
.footer-links{display:flex; gap:16px;}
.footer-links a:hover{color:var(--violet-deep);}

.back-to-top{
  position:fixed; bottom:24px; right:24px; width:44px; height:44px; border-radius:50%;
  background:var(--ink); color:#fff; border:none; font-size:18px; cursor:pointer;
  box-shadow:0 8px 20px rgba(20,21,26,.25); z-index:60;
  transition:transform .2s var(--bounce), opacity .2s var(--ease);
}
.back-to-top:hover{ transform:translateY(-4px); }
.back-to-top[hidden]{ display:none; }

/* ===== SCROLL-REVEAL ANIMATION ===== */
[data-animate]{
  opacity:0; transform:translateY(18px);
  transition:opacity .6s var(--ease), transform .6s var(--ease);
}
[data-animate].in-view{opacity:1; transform:translateY(0);}
@media (prefers-reduced-motion: reduce){
  [data-animate]{opacity:1; transform:none; transition:none;}
  html{scroll-behavior:auto;}
}

/* ===== RESPONSIVE ===== */
@media (max-width: 900px){
  .categories{grid-template-columns:repeat(3,1fr);}
  .footer-columns{grid-template-columns:repeat(3,1fr);}
}
@media (max-width: 720px){
  .main-nav{display:none;}
  .menu-btn{display:flex;}
  .hero{padding:44px 20px 30px;}
  .hero h1{font-size:32px; letter-spacing:-.5px;}
  .categories{grid-template-columns:repeat(2,1fr); padding:8px 20px 36px;}
  .section{padding:8px 20px 36px;}
  .tool-card{flex:0 0 200px;}
  .section-head h2{font-size:19px;}
  .footer-columns{grid-template-columns:repeat(2,1fr);}
  .footer-inner{gap:24px;}
  .newsletter-inner{padding:28px 24px;}
}