/* ============================================================
   NOTCHTOOLS — main.css
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;700&family=JetBrains+Mono:wght@400;500&display=swap');

/* --- Tokens --- */
:root {
  --color-bg:           #0d0d0d;
  --color-surface:      #111111;
  --color-surface-2:    #161616;
  --color-border:       #222222;
  --color-text:         #f0f0f0;
  --color-text-muted:   #888888;
  --color-accent:       #166616;
  --color-accent-light: #1f8c1f;
  --color-accent-glow:  rgba(22,102,22,.22);

  --color-convert:      #2563eb;
  --color-convert-glow: rgba(37,99,235,.18);
  --color-organize:     #7c3aed;
  --color-organize-glow:rgba(124,58,237,.18);
  --color-optimize:     #d97706;
  --color-optimize-glow:rgba(217,119,6,.18);

  --font-sans:  'Outfit', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:  'JetBrains Mono', monospace;

  --space-xs:  .25rem;
  --space-sm:  .5rem;
  --space-md:  1rem;
  --space-lg:  2rem;
  --space-xl:  4rem;
  --space-2xl: 6rem;

  --radius-sm: .375rem;
  --radius-md: .75rem;
  --radius-lg: 1.25rem;
  --radius-xl: 1.75rem;

  --transition: .2s ease;
  --max-w: 1160px;
  --header-h: 60px;
}

/* --- Reset --- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{font-size:16px;scroll-behavior:smooth;-webkit-font-smoothing:antialiased;}
body{background:var(--color-bg);color:var(--color-text);font-family:var(--font-sans);line-height:1.6;min-height:100vh;}
img,svg{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;}
button{font:inherit;cursor:pointer;border:none;background:none;}
input,select,textarea{font:inherit;}

/* --- Skip link --- */
.skip-link{position:absolute;top:-100%;left:1rem;background:var(--color-accent);color:#fff;padding:.5rem 1rem;border-radius:var(--radius-sm);font-weight:600;z-index:9999;transition:top .2s;}
.skip-link:focus{top:.75rem;}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0;}

/* ============================================================
   HEADER
   ============================================================ */
.site-header{
  position:fixed;top:0;left:0;right:0;
  height:var(--header-h);
  background:rgba(13,13,13,.92);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--color-border);
  z-index:200;
}
.header-inner{
  max-width:var(--max-w);margin:0 auto;padding:0 var(--space-lg);
  height:100%;display:flex;align-items:center;justify-content:space-between;gap:var(--space-lg);
}
.logo{display:flex;align-items:center;gap:.6rem;}
.header-logo-img{height:28px;width:auto;}
.logo-badge{
  font-size:.65rem;font-weight:700;font-family:var(--font-mono);
  background:var(--color-accent);color:#fff;
  padding:.15rem .45rem;border-radius:.25rem;
  letter-spacing:.06em;text-transform:uppercase;
}
.header-nav{display:flex;align-items:center;gap:var(--space-lg);}
.header-nav a{font-size:.88rem;font-weight:500;color:var(--color-text-muted);transition:color var(--transition);}
.header-nav a:hover{color:var(--color-text);}
.header-cta{
  padding:.5rem 1.1rem;background:var(--color-accent);color:#fff;
  border-radius:var(--radius-md);font-size:.85rem;font-weight:600;
  transition:background var(--transition),transform var(--transition);
}
.header-cta:hover{background:var(--color-accent-light);transform:translateY(-1px);}
.nav-toggle{display:none;flex-direction:column;gap:5px;padding:.4rem;}
.nav-toggle span{display:block;width:20px;height:2px;background:var(--color-text);border-radius:2px;transition:transform .2s,opacity .2s;}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  padding:calc(var(--header-h) + 5rem) var(--space-lg) 4rem;
  text-align:center;position:relative;overflow:hidden;
}
.hero::before{
  content:'';position:absolute;inset:0;
  background-image:linear-gradient(var(--color-border) 1px,transparent 1px),linear-gradient(90deg,var(--color-border) 1px,transparent 1px);
  background-size:44px 44px;opacity:.25;z-index:0;
}
.hero::after{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 70% 55% at 50% 30%,rgba(22,102,22,.13) 0%,transparent 70%);
  z-index:1;
}
.hero-inner{position:relative;z-index:2;max-width:700px;margin:0 auto;}
.hero-badge{
  display:inline-flex;align-items:center;gap:.4rem;
  font-size:.75rem;font-weight:600;font-family:var(--font-mono);
  color:var(--color-accent-light);background:var(--color-accent-glow);
  border:1px solid rgba(22,102,22,.35);
  padding:.3rem .9rem;border-radius:99px;
  letter-spacing:.06em;text-transform:uppercase;
  margin-bottom:var(--space-lg);
}
.hero-title{
  font-size:clamp(2.2rem,5.5vw,3.8rem);font-weight:700;
  letter-spacing:-.03em;line-height:1.1;
  margin-bottom:var(--space-md);
}
.hero-title .accent{color:var(--color-accent-light);}
.hero-desc{
  font-size:clamp(1rem,2.5vw,1.15rem);color:var(--color-text-muted);
  max-width:540px;margin:0 auto var(--space-xl);line-height:1.75;
}

/* Search bar */
.hero-search{
  display:flex;align-items:center;gap:.75rem;
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:var(--radius-xl);
  padding:.5rem .5rem .5rem 1.25rem;
  max-width:480px;margin:0 auto;
  transition:border-color var(--transition),box-shadow var(--transition);
}
.hero-search:focus-within{border-color:var(--color-accent);box-shadow:0 0 0 3px var(--color-accent-glow);}
.hero-search input{
  flex:1;background:none;border:none;outline:none;
  color:var(--color-text);font-size:.95rem;
}
.hero-search input::placeholder{color:var(--color-text-muted);}
.hero-search button{
  background:var(--color-accent);color:#fff;
  border-radius:var(--radius-lg);padding:.6rem 1.2rem;
  font-size:.88rem;font-weight:600;
  transition:background var(--transition);
  white-space:nowrap;
}
.hero-search button:hover{background:var(--color-accent-light);}

/* Hero stats */
.hero-stats{
  display:flex;align-items:center;justify-content:center;
  gap:var(--space-lg);margin-top:var(--space-lg);
  flex-wrap:wrap;
}
.hero-stat{text-align:center;}
.hero-stat-num{font-size:1.4rem;font-weight:700;font-family:var(--font-mono);color:var(--color-accent-light);}
.hero-stat-label{font-size:.75rem;color:var(--color-text-muted);letter-spacing:.05em;text-transform:uppercase;}

/* ============================================================
   TOOLS SECTION
   ============================================================ */
.tools-section{
  padding:var(--space-xl) var(--space-lg) var(--space-2xl);
  max-width:var(--max-w);margin:0 auto;
}
.tools-header{
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:var(--space-md);
  margin-bottom:var(--space-xl);
}
.section-label{
  font-family:var(--font-mono);font-size:.75rem;font-weight:500;
  color:var(--color-accent-light);letter-spacing:.12em;text-transform:uppercase;
  margin-bottom:.4rem;
}
.section-title{font-size:clamp(1.5rem,3vw,2.2rem);font-weight:700;letter-spacing:-.02em;}

/* Category filter tabs */
.cat-tabs{display:flex;gap:.5rem;flex-wrap:wrap;}
.cat-tab{
  padding:.4rem 1rem;border-radius:99px;
  font-size:.82rem;font-weight:600;
  border:1px solid var(--color-border);
  color:var(--color-text-muted);
  background:transparent;
  transition:all var(--transition);cursor:pointer;
}
.cat-tab:hover{border-color:var(--color-text-muted);color:var(--color-text);}
.cat-tab.active{background:var(--color-accent);border-color:var(--color-accent);color:#fff;}
.cat-tab[data-cat="convert"].active{background:var(--color-convert);border-color:var(--color-convert);}
.cat-tab[data-cat="organize"].active{background:var(--color-organize);border-color:var(--color-organize);}
.cat-tab[data-cat="optimize"].active{background:var(--color-optimize);border-color:var(--color-optimize);}

/* Tool grid */
.tools-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:var(--space-md);
}
.tool-card{
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  padding:var(--space-lg);
  display:flex;flex-direction:column;gap:.6rem;
  position:relative;overflow:hidden;
  transition:border-color var(--transition),transform var(--transition),box-shadow var(--transition);
  cursor:pointer;
}
.tool-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:var(--card-color,var(--color-accent));
  opacity:0;transition:opacity var(--transition);
}
.tool-card:hover{transform:translateY(-4px);box-shadow:0 12px 32px rgba(0,0,0,.4);}
.tool-card:hover::before{opacity:1;}
.tool-card[data-cat="convert"]{--card-color:var(--color-convert);}
.tool-card[data-cat="convert"]:hover{border-color:var(--color-convert);}
.tool-card[data-cat="organize"]{--card-color:var(--color-organize);}
.tool-card[data-cat="organize"]:hover{border-color:var(--color-organize);}
.tool-card[data-cat="optimize"]{--card-color:var(--color-optimize);}
.tool-card[data-cat="optimize"]:hover{border-color:var(--color-optimize);}

.tool-card.popular .popular-badge{
  position:absolute;top:.75rem;right:.75rem;
  font-size:.62rem;font-weight:700;font-family:var(--font-mono);
  letter-spacing:.08em;text-transform:uppercase;
  background:var(--color-accent-glow);color:var(--color-accent-light);
  border:1px solid rgba(22,102,22,.3);
  padding:.15rem .5rem;border-radius:99px;
}
.tool-icon-wrap{
  width:44px;height:44px;border-radius:var(--radius-md);
  display:flex;align-items:center;justify-content:center;
  background:var(--color-surface-2);
  border:1px solid var(--color-border);
  margin-bottom:.4rem;flex-shrink:0;
}
.tool-icon-wrap svg{width:22px;height:22px;}
.tool-card[data-cat="convert"] .tool-icon-wrap{background:var(--color-convert-glow);border-color:rgba(37,99,235,.3);}
.tool-card[data-cat="organize"] .tool-icon-wrap{background:var(--color-organize-glow);border-color:rgba(124,58,237,.3);}
.tool-card[data-cat="optimize"] .tool-icon-wrap{background:var(--color-optimize-glow);border-color:rgba(217,119,6,.3);}

.tool-card-title{font-size:1rem;font-weight:700;line-height:1.3;}
.tool-card-desc{font-size:.82rem;color:var(--color-text-muted);line-height:1.6;flex:1;}
.tool-card-arrow{
  font-size:.82rem;font-weight:600;
  color:var(--color-text-muted);
  margin-top:.4rem;
  transition:color var(--transition),gap var(--transition));
  display:flex;align-items:center;gap:.3rem;
}
.tool-card:hover .tool-card-arrow{color:var(--color-text);}
.tool-card.hidden{display:none;}

/* ============================================================
   HOW IT WORKS
   ============================================================ */
.how-section{
  padding:var(--space-2xl) var(--space-lg);
  background:var(--color-surface);
  border-top:1px solid var(--color-border);
  border-bottom:1px solid var(--color-border);
}
.how-inner{max-width:var(--max-w);margin:0 auto;text-align:center;}
.how-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:var(--space-lg);margin-top:var(--space-xl);
}
.how-card{padding:var(--space-lg);position:relative;}
.how-num{
  font-size:3rem;font-weight:700;font-family:var(--font-mono);
  color:var(--color-accent);opacity:.25;line-height:1;
  margin-bottom:var(--space-md);
}
.how-icon{
  width:52px;height:52px;border-radius:var(--radius-lg);
  background:var(--color-surface-2);border:1px solid var(--color-border);
  display:flex;align-items:center;justify-content:center;
  margin:0 auto var(--space-md);
}
.how-icon svg{width:26px;height:26px;color:var(--color-accent-light);}
.how-title{font-size:1.1rem;font-weight:700;margin-bottom:.5rem;}
.how-desc{font-size:.9rem;color:var(--color-text-muted);line-height:1.7;}

/* Connector line between steps */
.how-grid .how-card:not(:last-child)::after{
  content:'→';
  position:absolute;right:-1rem;top:50%;transform:translateY(-50%);
  font-size:1.4rem;color:var(--color-border);
}

/* ============================================================
   PRIVACY BANNER
   ============================================================ */
.privacy-banner{
  padding:var(--space-xl) var(--space-lg);text-align:center;
}
.privacy-inner{max-width:700px;margin:0 auto;}
.privacy-icon{
  width:56px;height:56px;border-radius:50%;
  background:var(--color-accent-glow);border:1px solid rgba(22,102,22,.3);
  display:flex;align-items:center;justify-content:center;
  margin:0 auto var(--space-md);
}
.privacy-icon svg{width:28px;height:28px;color:var(--color-accent-light);}
.privacy-title{font-size:1.6rem;font-weight:700;margin-bottom:.75rem;letter-spacing:-.02em;}
.privacy-desc{font-size:1rem;color:var(--color-text-muted);line-height:1.75;}
.privacy-badges{
  display:flex;justify-content:center;flex-wrap:wrap;gap:.75rem;
  margin-top:var(--space-lg);
}
.privacy-badge{
  display:inline-flex;align-items:center;gap:.4rem;
  font-size:.8rem;font-weight:600;font-family:var(--font-mono);
  color:var(--color-text-muted);
  background:var(--color-surface);
  border:1px solid var(--color-border);
  padding:.4rem .9rem;border-radius:99px;
  letter-spacing:.04em;
}
.privacy-badge svg{width:14px;height:14px;color:var(--color-accent-light);}

/* ============================================================
   TRUST STRIP
   ============================================================ */
.trust-strip{
  background:var(--color-surface);
  border-top:1px solid var(--color-border);
  border-bottom:1px solid var(--color-border);
  padding:var(--space-md) var(--space-lg);
}
.trust-strip-inner{
  max-width:var(--max-w);margin:0 auto;
  display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem;
}
.trust-item{
  display:flex;align-items:flex-start;gap:.65rem;
  font-size:.8rem;color:var(--color-text-muted);line-height:1.5;
}
.trust-item svg{flex-shrink:0;margin-top:2px;color:var(--color-accent-light);}
.trust-item strong{color:var(--color-text);}
@media(max-width:900px){.trust-strip-inner{grid-template-columns:repeat(2,1fr);}}
@media(max-width:500px){.trust-strip-inner{grid-template-columns:1fr;}}

/* ============================================================
   NOTCHAI PROMO
   ============================================================ */
.notchai-promo{
  padding:var(--space-xl) var(--space-lg);
  background:linear-gradient(135deg,rgba(22,102,22,.06) 0%,transparent 60%);
  border-top:1px solid var(--color-border);
}
.notchai-promo-inner{
  max-width:var(--max-w);margin:0 auto;
  display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center;
}
.notchai-promo-label{
  font-size:.75rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--color-accent-light);margin-bottom:.5rem;
}
.notchai-promo-title{
  font-size:1.6rem;font-weight:700;letter-spacing:-.02em;
  margin-bottom:.85rem;line-height:1.3;
}
.notchai-promo-title a{color:var(--color-accent-light);text-decoration:none;}
.notchai-promo-title a:hover{text-decoration:underline;}
.notchai-promo-desc{font-size:.9rem;color:var(--color-text-muted);line-height:1.75;margin-bottom:1.25rem;}
.notchai-promo-actions{display:flex;gap:.75rem;flex-wrap:wrap;}
.promo-btn-primary{
  display:inline-flex;align-items:center;
  padding:.6rem 1.4rem;border-radius:var(--radius-md);
  background:var(--color-accent);color:#fff;font-size:.85rem;font-weight:600;
  text-decoration:none;transition:background var(--transition),transform var(--transition);
}
.promo-btn-primary:hover{background:var(--color-accent-light);transform:translateY(-1px);}
.promo-btn-secondary{
  display:inline-flex;align-items:center;
  padding:.6rem 1.4rem;border-radius:var(--radius-md);
  border:1px solid var(--color-border);color:var(--color-text-muted);
  font-size:.85rem;font-weight:600;text-decoration:none;
  transition:border-color var(--transition),color var(--transition);
}
.promo-btn-secondary:hover{border-color:var(--color-accent);color:var(--color-text);}
.notchai-promo-badges{display:flex;flex-direction:column;gap:.85rem;}
.promo-badge-card{
  display:flex;align-items:flex-start;gap:.85rem;
  background:var(--color-surface);border:1px solid var(--color-border);
  border-radius:var(--radius-md);padding:.85rem 1rem;
}
.promo-badge-card svg{flex-shrink:0;margin-top:2px;color:var(--color-accent-light);}
.promo-badge-card strong{display:block;font-size:.88rem;color:var(--color-text);margin-bottom:.15rem;}
.promo-badge-card span{font-size:.78rem;color:var(--color-text-muted);line-height:1.5;}
@media(max-width:800px){
  .notchai-promo-inner{grid-template-columns:1fr;}
  .notchai-promo-badges{flex-direction:row;flex-wrap:wrap;}
  .promo-badge-card{flex:1;min-width:200px;}
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{
  border-top:1px solid var(--color-border);
  padding:var(--space-xl) var(--space-lg) var(--space-lg);
}
.footer-inner{
  max-width:var(--max-w);margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:var(--space-lg);
}
.footer-brand{display:flex;flex-direction:column;gap:.5rem;}
.footer-logo-img{height:24px;width:auto;opacity:.7;}
.footer-tagline{font-size:.8rem;color:var(--color-text-muted);font-family:var(--font-mono);}
.footer-links{display:flex;gap:var(--space-md);flex-wrap:wrap;align-items:center;}
.footer-links a{font-size:.82rem;color:var(--color-text-muted);transition:color var(--transition);}
.footer-links a:hover{color:var(--color-text);}
.footer-copy{font-size:.78rem;color:var(--color-text-muted);opacity:.5;}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.7rem 1.6rem;border-radius:var(--radius-md);
  font-weight:600;font-size:.9rem;transition:all var(--transition);
  white-space:nowrap;
}
.btn-primary{background:var(--color-accent);color:#fff;border:1px solid var(--color-accent);}
.btn-primary:hover{background:var(--color-accent-light);border-color:var(--color-accent-light);transform:translateY(-1px);box-shadow:0 6px 18px var(--color-accent-glow);}
.btn-outline{background:transparent;color:var(--color-accent-light);border:1px solid var(--color-accent);}
.btn-outline:hover{background:var(--color-accent-glow);}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:1100px){.tools-grid{grid-template-columns:repeat(3,1fr);}}
@media(max-width:800px){
  .tools-grid{grid-template-columns:repeat(2,1fr);}
  .how-grid{grid-template-columns:1fr;}
  .how-grid .how-card::after{display:none;}
  .footer-inner{flex-direction:column;align-items:center;text-align:center;}
}
@media(max-width:600px){
  :root{--space-lg:1.25rem;--space-xl:2.5rem;--space-2xl:4rem;}
  .header-inner{padding:0 1rem;}
  .header-nav{display:none;}
  .header-nav.open{
    display:flex;flex-direction:column;
    position:fixed;top:var(--header-h);left:0;right:0;
    background:var(--color-surface);border-bottom:1px solid var(--color-border);
    padding:var(--space-lg);gap:var(--space-lg);z-index:199;
  }
  .nav-toggle{display:flex;}
  .tools-grid{grid-template-columns:1fr;}
  .hero-stats{gap:var(--space-md);}
}