/* ══════════════════════════════════════════════
   Camurj landing page — design tokens
   Dark theme + amber accent, matching the extension's
   own visual system (see the product's prompt.html).
   ══════════════════════════════════════════════ */
  

:root{
  --bg:            #09090b;
  --surface:       #121214;
  --surface-2:     #18181b;
  --elevated:      #1f1f23;
  --elevated-2:    #1a1a1d;
  --border:        #27272a;
  --border-2:      #3f3f46;
  --text:          #e4e4e7;
  --text-dim:      #a1a1aa;
  --text-mute:     #71717a;
  --text-faint:    #52525b;
  --amber:         #f59e0b;
  --amber-hi:      #fbbf24;
  --on-amber:      #09090b;

  --font-display: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body:    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --container: 1120px;
}


*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@import url('https://googleapis.com');
body{
  background:var(--bg);
  color:var(--text);
  font-family: 'MuseoModerno', sans-serif;
  font-size:15px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img,svg{display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
code{font-family:var(--font-mono);font-size:.9em;background:rgba(245,158,11,.12);
  color:var(--amber-hi);padding:.1em .4em;border-radius:4px}

::selection{background:rgba(245,158,11,.25);color:var(--text)}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border-2);border-radius:8px}

:focus-visible{outline:2px solid var(--amber);outline-offset:2px;border-radius:4px}

.skip-link{
  position:absolute;left:-999px;top:auto;background:var(--amber);color:var(--on-amber);
  padding:10px 16px;border-radius:0 0 8px 0;font-weight:600;z-index:200;
}
.skip-link:focus{left:0;top:0}

.section-inner{max-width:var(--container);margin:0 auto;padding:0 24px}

h1,h2,h3{font-family:var(--font-display);font-weight:600;letter-spacing:-0.01em;color:#fafafa}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.001ms !important;transition-duration:.001ms !important}
}

/* ── Buttons ── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 22px;border-radius:10px;font-family:var(--font-body);
  font-size:14px;font-weight:600;cursor:pointer;border:1px solid transparent;
  transition:background .15s ease, transform .15s ease, border-color .15s ease;
  white-space:nowrap;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--amber);color:var(--on-amber)}
.btn-primary:hover{background:var(--amber-hi)}
.btn-secondary{background:transparent;color:var(--text);border-color:var(--border-2)}
.btn-secondary:hover{border-color:var(--text-mute);background:rgba(255,255,255,.03)}
.btn-sm{padding:8px 16px;font-size:13px}

/* ══════════════════════════════════════════════
   Header / nav
   ══════════════════════════════════════════════ */
.site-header{
  position:sticky;top:0;z-index:100;
  background:rgba(9,9,11,.85);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}
.header-inner{
  max-width:var(--container);margin:0 auto;padding:14px 24px;
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:20px;
}
.brand{display:flex;align-items:baseline;gap:8px}
.brand-mark{
  font-family:var(--font-mono);font-weight:700;font-size:15px;letter-spacing:.02em;
  background:var(--amber);color:var(--on-amber);padding:3px 8px;border-radius:6px;
}
.brand-sub{font-size:13px;color:var(--text-dim)}

.site-nav{display:flex;align-items:center;justify-content:space-evenly;gap:28px;width:100%}
.site-nav a{font-size:14px;color:var(--text-dim);transition:color .15s}
.site-nav a:hover{color:var(--text)}

.header-actions{display:flex;align-items:center;gap:14px;justify-self:end}

.nav-toggle{
  display:none;flex-direction:column;justify-content:center;gap:4px;
  width:34px;height:34px;background:transparent;border:1px solid var(--border-2);
  border-radius:8px;cursor:pointer;
}
.nav-toggle span{width:16px;height:2px;background:var(--text);margin:0 auto;border-radius:2px}

/* ══════════════════════════════════════════════
   Hero
   ══════════════════════════════════════════════ */
.hero{padding:72px 0 88px;border-bottom:1px solid var(--border)}
.hero-inner{
  max-width:var(--container);margin:0 auto;padding:0 24px;
  display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;
}
.eyebrow{
  display:inline-block;font-family:var(--font-mono);font-size:11px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--amber-hi);
  background:rgba(245,158,11,.1);border:1px solid rgba(245,158,11,.3);
  padding:5px 11px;border-radius:20px;margin-bottom:20px;
}
.hero h1{font-size:44px;line-height:1.12;margin-bottom:20px;max-width:15ch}
.hero-sub{font-size:16px;color:var(--text-dim);max-width:46ch;margin-bottom:28px}
.hero-ctas{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.hero-meta{font-size:13px;color:var(--text-mute)}

/* Hero video */
.hero-visual{display:flex;justify-content:center}
.hero-video{
  width:100%;max-width:400px;
  object-fit: cover;
  overflow:hidden;      
  aspect-ratio:3/5;    
  object-fit:cover;
  display:block;
  background:var(--surface-2);
  border:1px solid var(--border);border-radius:14px;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.6);
}

/* ══════════════════════════════════════════════
   How it works
   ══════════════════════════════════════════════ */
.how-it-works{padding:80px 0;border-bottom:1px solid var(--border)}
.how-it-works h2{font-size:28px;margin-bottom:40px;text-align:center}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.step{
  opacity:0;transform:translateY(14px);transition:opacity .5s ease, transform .5s ease;
}
.step.in-view{opacity:1;transform:none}
.step-num{
  display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;
  font-family:var(--font-mono);font-size:13px;font-weight:700;color:var(--amber-hi);
  border:1px solid rgba(245,158,11,.35);background:rgba(245,158,11,.08);
  border-radius:50%;margin-bottom:16px;
}
.step h3{font-size:17px;margin-bottom:8px}
.step p{font-size:14px;color:var(--text-dim);line-height:1.65}
.step-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.tag{
  font-size:11px;font-weight:500;color:var(--text-dim);background:var(--elevated);
  border:1px solid var(--border-2);padding:4px 10px;border-radius:7px;
}
/* ══════════════════════════════════════════════
   Categories
   ══════════════════════════════════════════════ */
.categories{padding:80px 0;border-bottom:1px solid var(--border)}
.categories h2{font-size:28px;margin-bottom:8px;text-align:center}
.section-sub{font-size:14.5px;color:var(--text-dim);max-width:60ch;margin:0 auto 36px;text-align:center}
.category-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.category-card{
  display:flex;gap:12px;padding:16px;background:var(--elevated-2);
  border:1px solid var(--border);border-radius:12px;
  opacity:0;transform:translateY(14px);transition:opacity .5s ease, transform .5s ease;
}
.category-card.in-view{opacity:1;transform:none}
.cat-icon{width:9px;height:9px;border-radius:3px;flex-shrink:0;margin-top:5px}
.category-card-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:6px}
.category-name{font-size:13.5px;font-weight:600;color:var(--text)}
.category-count{font-family:var(--font-mono);font-size:10px;color:var(--text-faint);white-space:nowrap}
.category-desc{font-size:12.5px;color:var(--text-mute);line-height:1.55}


/* ══════════════════════════════════════════════
   Category color system
   (matches the extension's own BADGE palette)
   ══════════════════════════════════════════════ */
.cat-marketing{background:#b91c1c}
.cat-career{background:#0e7490}
.cat-business{background:#0f766e}
.cat-writing{background:#9d174d}
.cat-learning{background:#6d28d9}
.cat-research{background:#047857}
.cat-image{background:#1d4ed8}
.cat-video{background:#be185d}
.cat-code-app{background:#b45309}
.cat-data{background:#4338ca}
.cat-everyday{background:#65a30d}
.cat-personal{background:#c2410c}

/* ══════════════════════════════════════════════
   Final CTA
   ══════════════════════════════════════════════ */
.final-cta{padding:88px 0;text-align:center}
.final-cta h2{font-size:30px;margin-bottom:14px}
.final-cta p{font-size:15px;color:var(--text-dim);max-width:52ch;margin:0 auto 28px}
.final-meta{font-size:13px;color:var(--text-mute);margin-top:16px}


/* ══════════════════════════════════════════════
   Donate
   ══════════════════════════════════════════════ */
.donate{padding:0 0 88px}
.donate-card{
  display:flex;align-items:center;justify-content:space-between;gap:36px;
  background:var(--elevated-2);border:1px solid var(--border);
  border-radius:14px;padding:28px 32px;
}
.donate-label{
  display:inline-block;font-family:var(--font-mono);font-size:10.5px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--amber-hi);margin-bottom:10px;
}
.donate-copy h2{font-size:20px;margin-bottom:8px}
.donate-copy p{font-size:14px;color:var(--text-dim);max-width:58ch;line-height:1.65}
.donate-action{display:flex;flex-direction:column;align-items:center;gap:8px;flex-shrink:0}
.donate-meta{font-size:11.5px;color:var(--text-faint)}

/* ══════════════════════════════════════════════
   Footer
   ══════════════════════════════════════════════ */
.site-footer{border-top:1px solid var(--border);padding:24px;text-align:center}
.site-footer p{font-size:12.5px;color:var(--text-faint)}

/* ══════════════════════════════════════════════
   Responsive
   ══════════════════════════════════════════════ */
@media (max-width: 980px){
  .hero-inner{grid-template-columns:1fr;gap:44px}
  .hero-visual{order:-1}
  .hero h1{font-size:36px;max-width:none}
  .category-grid{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:1fr;gap:28px}
}

@media (max-width: 720px){
  .site-nav{
    position:absolute;top:100%;left:0;right:0;background:var(--surface-2);
    border-bottom:1px solid var(--border);flex-direction:column;align-items:flex-start;
    gap:0;max-height:0;overflow:hidden;transition:max-height .25s ease;
  }
  .donate-card{flex-direction:column;align-items:flex-start;gap:22px;padding:24px}
  .donate-action{align-items:flex-start;width:100%}
  .donate-action .btn{width:100%}
  .site-nav.open{max-height:220px}
  .site-nav a{padding:14px 24px;width:100%;border-bottom:1px solid var(--border)}
  .nav-toggle{display:flex}
  .header-actions .btn-sm{display:none}
  .hero{padding:48px 0 60px}
  .hero h1{font-size:30px}
  .category-grid{grid-template-columns:1fr}
}

/* ══════════════════════════════════════════════
Legal pages (privacy, terms)
══════════════════════════════════════════════ */
.legal-page{padding:56px 0 72px}
.legal-page h1{font-size:34px;margin-bottom:8px}
.legal-page h2{font-size:19px;margin:38px 0 10px}
.legal-page p{font-size:15px;color:var(--text-dim);line-height:1.75;max-width:68ch;margin-bottom:14px}
.legal-meta{font-family:var(--font-mono);font-size:12px;color:var(--text-faint);margin-bottom:28px}
.legal-lead{font-size:16px;color:var(--text);max-width:68ch}
.legal-list{list-style:none;max-width:68ch;margin-bottom:14px}
.legal-list li{
  font-size:15px;color:var(--text-dim);line-height:1.7;
  padding-left:20px;position:relative;margin-bottom:8px;
}
.legal-list li::before{content:"—";position:absolute;left:0;color:var(--amber)}
.legal-list strong{color:var(--text);font-weight:600}
.legal-note{
  border-left:2px solid var(--amber);background:rgba(245,158,11,.06);
  padding:12px 16px;border-radius:0;color:var(--text)!important;
}
.legal-page a{color:var(--amber-hi);text-decoration:underline;text-underline-offset:2px}

/* ══════════════════════════════════════════════
  Responsive
  ══════════════════════════════════════════════ */
@media (max-width: 980px){
  .hero-inner{grid-template-columns:1fr;gap:44px}
  .hero-visual{order:-1}
  .hero h1{font-size:36px;max-width:none}
  .category-grid{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr);gap:28px}
}

@media (max-width: 720px){
  .site-nav{
    position:absolute;top:100%;left:0;right:0;background:var(--surface-2);
    border-bottom:1px solid var(--border);flex-direction:column;align-items:flex-start;
    gap:0;max-height:0;overflow:hidden;transition:max-height .25s ease;
  }
  .site-nav.open{max-height:220px}
  .site-nav a{padding:14px 24px;width:100%;border-bottom:1px solid var(--border)}
  .nav-toggle{display:flex}
  .header-actions .btn-sm{display:none}
  .hero{padding:48px 0 60px}
  .hero h1{font-size:30px}
  .category-grid{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .donate-card{flex-direction:column;align-items:flex-start;gap:22px;padding:24px}
  .donate-action{align-items:flex-start;width:100%}
  .donate-action .btn{width:100%}
}
.hero-copy{
 margin-top: -120px;
}