: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%; }

/* 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); }
}