:root{
  /* Atlassian-inspired palette */
  --bg: #f7f9fb;
  --surface: #ffffff;
  --ink: #172B4D;
  --muted: #5E6C84;
  --line: #EBECF0;
  --brand: #0C66E4;
  --brand-2: #1F5BFF;
  --accent: #0052CC;
  --ok: #22A06B;
  --warn: #F5CD47;
  --bad: #E34935;
  --shadow: 0 8px 30px rgba(9,30,66,.12);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  color:var(--ink); background:var(--bg);
  min-height:100vh; overflow-x:hidden;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}

/* Containers */
.container{ max-width:1200px; margin:0 auto; padding:0 20px; }

/* Header */
.site-header{
  position:sticky; top:0; z-index:40; background:rgba(255,255,255,.9);
  border-bottom:1px solid var(--line); backdrop-filter: blur(8px);
}
.nav-wrap{ display:flex; align-items:center; justify-content:space-between; height:64px; }
.brand{ display:flex; gap:10px; align-items:center; text-decoration:none; }
.brand-mark{ display:inline-grid; place-items:center; width:56px; height:56px; border-radius:8px; background:transparent; }
.brand-mark img{ width:56px; height:56px; display:block; border-radius:6px }
.brand-text{ color:var(--ink); font-weight:800; letter-spacing:.2px; font-size:24px; line-height:1.1; }
.nav{ display:flex; align-items:center; }
.nav-toggle{ display:none; flex-direction:column; gap:5px; background:transparent; border:0; cursor:pointer; }
.nav-toggle .bar{ width:26px; height:2px; background:var(--ink); display:block; border-radius:1px; }
.nav-list{ display:flex; gap:18px; align-items:center; list-style:none; margin:0; padding:0; }
.nav-list a{ color:var(--muted); text-decoration:none; font-weight:600; padding:8px 10px; border-radius:8px; }
.nav-list a:hover{ color:var(--ink); background: #F1F2F4; }
.cta-link{ color:#fff !important; background:linear-gradient(135deg,var(--brand),var(--brand-2));
  padding:10px 14px; border-radius:10px; box-shadow:var(--shadow); }

/* Hero */
.hero{ padding:0; min-height: auto; display:flex; align-items:flex-start; background: radial-gradient(1200px 600px at 90% -10%, rgba(12,102,228,.12), transparent 60%), radial-gradient(800px 400px at -10% 10%, rgba(31,91,255,.10), transparent 60%), linear-gradient(180deg,#fff 0%, #F7F9FB 100%); }
.hero .container{ width:100%; }
.hero-grid{ display:grid; grid-template-columns:1.2fr 1fr; gap:28px; align-items:center; }
.hero-copy h1{ font-size: clamp(34px, 5vw, 56px); line-height:1.04; margin:0 0 12px; letter-spacing:-.2px; }
.grad{ background: linear-gradient(90deg, var(--brand), var(--brand-2), var(--accent));
  -webkit-background-clip:text; background-clip:text; color:transparent; }
.lead{ color:var(--muted); font-size:18px; margin:0 0 20px; }
.hero-actions{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom:12px; }
.hero-points{ list-style:none; padding:0; margin:10px 0 0; color:var(--muted); display:flex; gap:14px; flex-wrap:wrap; }

.mock-svg{ width:100%; height:auto; filter:drop-shadow(var(--shadow)); border-radius:16px; }
.m-bg{ fill:#ffffff; }
.m-line{ fill:#e5e7eb; }
.m-bar.a{ fill:#2563eb; opacity:.9; }
.m-bar.b{ fill:#7c3aed; opacity:.9; }
.m-bar.c{ fill:#1d4ed8; opacity:.9; }

/* Slider */
.slider{ position:relative; width:100%; aspect-ratio: 16 / 9; background:#fff; border:1px solid var(--line); border-radius:16px; overflow:hidden; box-shadow:var(--shadow); margin:4px 0 8px; }
.slider.big{ aspect-ratio: 16 / 9; }
.slides{ width:100%; height:100%; position:relative; z-index:1; }
.slide{ position:absolute; inset:0; opacity:0; transition: opacity .5s ease; display:flex; align-items:center; justify-content:center; background:#fff; }
.slide.is-active{ opacity:1; }
.slide img{ width:100%; height:100%; max-width:100%; max-height:100%; object-fit:contain; display:block; background:#fff; image-rendering:auto; }
.slide-btn{ position:absolute; top:50%; transform: translateY(-50%); background:rgba(255,255,255,.85); border:1px solid var(--line); width:36px; height:36px; border-radius:999px; display:grid; place-items:center; cursor:pointer; box-shadow:var(--shadow); z-index:2; }
.slide-btn:hover{ background:#fff; }
.slide-btn.prev{ left:10px; }
.slide-btn.next{ right:10px; }
.slide-dots{ position:absolute; left:50%; bottom:10px; transform: translateX(-50%); display:flex; gap:8px; z-index:2; }
.slide-dots button{ width:8px; height:8px; border-radius:999px; background:rgba(17,24,39,.25); border:0; padding:0; cursor:pointer; }
.slide-dots button[aria-selected="true"]{ background:var(--brand); }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }

/* Sections */
.section{ padding:56px 0; }
.section#categories{ padding:24px 0; }
.section.alt{ background:#fff; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.section-title{ font-size:28px; margin:0 0 24px; }
.muted{ color:var(--muted); }

/* Categories */
.cat-header{ margin-bottom:12px; }
.cat-grid{ display:grid; grid-template-columns:1fr; gap:20px; }
.cat-card{ background:#fff; border:1px solid var(--line); border-radius:16px; padding:16px; box-shadow:var(--shadow); }
.cat-head{ display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:12px; gap:12px; }
.cat-chip{ font-size:12px; padding:6px 8px; border-radius:999px; border:1px solid var(--line); margin-bottom:6px; display:inline-block; }
.cat-chip.live{ background:#ecfdf5; color:#065f46; border-color:#a7f3d0; }
.cat-chip.soon{ background:#fff7ed; color:#9a3412; border-color:#fed7aa; }

/* Tool cards */
.tool-grid{ display:grid; grid-template-columns: 1fr; gap:22px; }
.card{ background:#fff; border:1px solid var(--line); border-radius:16px; padding:14px 16px; position:relative; box-shadow:var(--shadow); transition: transform .12s ease, box-shadow .2s ease; }
.card:hover{ transform: translateY(-2px); box-shadow: 0 12px 34px rgba(9,30,66,.16); }
.card.disabled{ opacity:.65; }
.card.disabled .btn{ cursor:not-allowed; }
.card-head{ display:flex; align-items:center; gap:10px; justify-content:space-between; }
.card h4{ margin:0; }
.chip{ font-size:12px; padding:6px 8px; border-radius:999px; background: rgba(37,99,235,.08); color: var(--brand); border:1px solid rgba(37,99,235,.3); }
.chip.ghost{ background:#f3f4f6; color:#6b7280; border-color:#e5e7eb; }
.mini-list{ list-style:disc; margin:8px 0 8px; padding-left:20px; color:var(--muted); }
.mini-list li{ margin:6px 0; line-height:1.4; position:static; }
.mini-list li::before{ content:none; }

/* Comparison table */
.cmp-table{ border:1px solid var(--line); border-radius:14px; overflow:hidden; background:#fff; box-shadow:var(--shadow); }
.cmp-row{ display:grid; grid-template-columns: 1.1fr 1fr 1fr; border-top:1px solid var(--line); }
.cmp-row:first-child{ border-top:0; }
.cmp-head{ background:#f3f4f6; font-weight:700; }
.cmp-cell{ padding:14px 16px; }
.cmp-row:nth-child(even){ background:#fcfcfd; }

.cta-duo{ display:flex; gap:12px; margin-top:16px; flex-wrap:wrap; }

/* Detail pages */
.breadcrumbs{ font-size:14px; color:var(--muted); margin-bottom:10px; }
.breadcrumbs a{ color:var(--brand); text-decoration:none; }
.tool-detail{ background:#fff; border:1px solid var(--line); border-radius:16px; padding:18px; box-shadow:var(--shadow); margin:18px 0; }
.tool-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.sep{ border:0; border-top:1px solid var(--line); margin:24px 0; }

/* Gallery */
.gallery{ display:grid; grid-template-columns: repeat(3, 1fr); gap:14px; margin-top:10px; }
.shot{ background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); overflow:hidden; }
.shot img{ width:100%; height:220px; object-fit:cover; display:block; background:#f3f4f6; }
.shot figcaption{ padding:8px 10px; font-size:13px; color:var(--muted); }

/* Footer */
.site-footer{ padding:28px 0; border-top:1px solid var(--line); background:#fff; }
.foot-grid{ display:grid; grid-template-columns:1.2fr .8fr 1fr; gap:20px; align-items:start; }
.foot-note, .foot-legal, .foot-links a{ color:var(--muted); text-decoration:none; }
.foot-links{ display:flex; gap:16px; flex-wrap:wrap; }

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  text-decoration:none; font-weight:700; border-radius:999px; padding:12px 18px; border:1px solid var(--line);
  transition: transform .06s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}
.btn-primary{ color:#fff; background:linear-gradient(135deg,var(--brand),var(--brand-2)); box-shadow:var(--shadow); border-color: transparent; }
.btn-ghost{ color:#111827; background:#fff; }
.btn:hover{ transform: translateY(-1px); }
.w-full{ width:100%; }

/* Project hub modal */
.project-hub-backdrop{
  position:fixed;
  inset:0;
  background:rgba(15,23,42,0.45);
  display:none;
  align-items:center;
  justify-content:center;
  padding:20px;
  z-index:80;
}
.project-hub-backdrop.is-open{display:flex;}
.project-hub-modal{
  width:min(860px, 96vw);
  max-height:90vh;
  overflow:auto;
  background:#fff;
  border-radius:16px;
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  padding:18px;
}
.project-hub-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.project-hub-header h3{margin:0;font-size:18px}
.project-hub-close{
  width:32px;height:32px;border-radius:999px;border:1px solid var(--line);
  background:#fff;color:#111827;font-weight:700;cursor:pointer;
}
.project-hub-body{display:grid;gap:14px}
.project-hub-section{border:1px solid var(--line);border-radius:12px;padding:12px;background:#fafbff}
.project-hub-section__head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.project-hub-section__head h4{margin:0;font-size:15px}
.project-hub-count{font-size:12px;color:var(--muted)}
.project-hub-list{display:grid;gap:8px}
.project-hub-row{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:#fff;border:1px solid var(--line);border-radius:10px;padding:8px 10px;
}
.project-hub-row .meta{display:grid;gap:2px}
.project-hub-row .title{font-weight:600}
.project-hub-row .sub{font-size:12px;color:var(--muted)}
.project-hub-row .actions{display:flex;gap:6px;flex-wrap:wrap}
.project-hub-row .actions .btn{padding:8px 12px;font-size:12px}
.project-hub-empty{color:var(--muted);font-size:13px;padding:6px 0}
.project-hub-new{
  display:grid;
  gap:12px;
  grid-template-columns:repeat(2, minmax(0, 1fr)) auto;
  align-items:end;
  background:#fff;
  border:1px dashed var(--line);
  border-radius:10px;
  padding:12px;
}
.project-hub-field{display:grid;gap:6px}
.project-hub-field label{font-size:12px;color:var(--muted)}
.project-hub-field select,.project-hub-field input{
  height:38px;
  border:1px solid var(--line);
  border-radius:8px;
  padding:0 10px;
  background:#fff;
}
.project-hub-create{
  white-space:nowrap;
  height:38px;
  padding:0 18px;
}
.project-hub-team{min-width:140px}
.project-hub-team.is-hidden{display:none}
.project-hub-name.is-hidden{display:none}
@media (max-width: 900px){
  .project-hub-new{grid-template-columns:1fr 1fr}
  .project-hub-create{grid-column:1 / -1;width:100%}
}
@media (max-width: 780px){
  .project-hub-new{grid-template-columns:1fr;align-items:stretch}
  .project-hub-create{width:100%}
}

/* Responsive */
@media (max-width: 1060px){
  .foot-grid{ grid-template-columns: 1fr; }
}
@media (max-width: 900px){
  .tool-grid{ grid-template-columns: 1fr; }
  .gallery{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px){
  .hero-grid{ grid-template-columns: 1fr; }
  .nav-toggle{ display:flex; }
  .nav-list{
    position: fixed; inset: 64px 16px auto 16px; display:none; flex-direction:column; gap:10px;
    background: #fff; padding:16px; border:1px solid var(--line); border-radius:12px; box-shadow: var(--shadow);
  }
  .nav-list.show{ display:flex; }
  .gallery{ grid-template-columns: 1fr; }
}
@media (max-width: 640px){
  .section{ padding:42px 0; }
  .hero-copy h1{ font-size: clamp(28px, 7vw, 40px); }
}