:root{
  --bg:#f5f5f5;
  --bg-soft:#fafafa;
  --surface:#ffffff;
  --surface-2:#fcfcfc;
  --surface-3:#f8f8f8;
  --text:#121212;
  --muted:#666b74;
  --line:#ececec;
  --line-strong:#dddddd;
  --accent:#d61f26;
  --accent-dark:#ab1218;
  --accent-soft:#fff0f1;
  --shadow:0 16px 40px rgba(14,16,20,.06);
  --radius-xl:28px;
  --radius-lg:22px;
  --radius-md:18px;
  --radius-sm:14px;
  --content:1240px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color:var(--text);
  background:linear-gradient(180deg, #fafafa 0%, #f3f3f3 100%);
}
.site-bg{
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at top left, rgba(214,31,38,.05), transparent 28%),
    radial-gradient(circle at bottom right, rgba(0,0,0,.025), transparent 28%),
    linear-gradient(rgba(255,255,255,.35), rgba(255,255,255,0));
}
a{text-decoration:none;color:inherit}
img{display:block;max-width:100%}
.section{max-width:var(--content);margin:0 auto 28px;padding:0 24px}

.site-header{
  position:sticky;
  top:0;
  z-index:50;
  max-width:var(--content);
  margin:0 auto;
  padding:18px 24px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  backdrop-filter:blur(14px);
}
.brand{
  display:flex;
  align-items:center;
  min-height:58px;
}
.brand-logo{
  width:220px;
  height:auto;
}
.nav{
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px;
  border:1px solid rgba(255,255,255,.8);
  background:rgba(255,255,255,.82);
  border-radius:999px;
  box-shadow:0 12px 28px rgba(18,18,18,.05);
}
.nav-link,
.nav-trigger{
  appearance:none;
  border:none;
  background:transparent;
  color:var(--muted);
  font:inherit;
  font-weight:600;
  padding:11px 14px;
  border-radius:999px;
  cursor:pointer;
}
.nav-link:hover,
.nav-trigger:hover{
  color:var(--text);
  background:var(--surface-3);
}
.nav-dropdown{position:relative}
.caret{font-size:.85em;color:var(--accent)}
.dropdown-menu{
  position:absolute;
  top:calc(100% + 12px);
  left:0;
  min-width:250px;
  padding:10px;
  border:1px solid var(--line);
  border-radius:20px;
  background:rgba(255,255,255,.97);
  box-shadow:var(--shadow);
  display:none;
}
.nav-dropdown:hover .dropdown-menu,
.nav-dropdown:focus-within .dropdown-menu{display:block}
.dropdown-item{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  padding:12px 14px;
  border-radius:14px;
}
.dropdown-item span{font-weight:700}
.dropdown-item small{color:var(--muted)}
.dropdown-item + .dropdown-item{margin-top:4px}
.active-item{background:var(--accent-soft)}
.active-item span{color:var(--accent-dark)}
.muted-item{background:#fafafa;color:#2c3138}

.hero{
  display:grid;
  grid-template-columns:1fr 1.05fr;
  gap:28px;
  align-items:center;
  padding-top:24px;
}
.hero-copy{padding:28px 0}
.eyebrow{
  margin:0 0 14px;
  color:var(--accent);
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:.74rem;
  font-weight:800;
}
h1{
  margin:0;
  max-width:12ch;
  font-size:clamp(2.9rem, 5vw, 5rem);
  line-height:.96;
  letter-spacing:-.05em;
}
.lede{
  margin:20px 0 0;
  max-width:60ch;
  color:var(--muted);
  font-size:1.08rem;
  line-height:1.75;
}
.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin:28px 0 24px;
}
.button{
  display:inline-flex;
  align-items:center;
  gap:10px;
  border-radius:999px;
  padding:15px 20px;
  font:inherit;
  font-weight:800;
  border:1px solid transparent;
}
.button.primary{
  color:#fff;
  background:linear-gradient(180deg, var(--accent), var(--accent-dark));
  box-shadow:0 16px 30px rgba(214,31,38,.18);
}
.button.secondary{
  background:rgba(255,255,255,.92);
  color:var(--text);
  border-color:var(--line-strong);
}
.button[disabled]{cursor:not-allowed;opacity:1}
.pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:6px 10px;
  border-radius:999px;
  font-size:.74rem;
  background:rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.2);
}
.button.secondary .pill{
  background:var(--accent-soft);
  color:var(--accent-dark);
  border-color:#ffd4d7;
}
.hero-meta-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}
.meta-card,
.suite-card,
.sample-card,
.feature-panel,
.spec-panel,
.download-card,
.editor-sample,
.hero-visual-card{
  background:rgba(255,255,255,.92);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow);
}
.meta-card{padding:18px}
.meta-label{
  display:inline-block;
  margin-bottom:8px;
  color:var(--accent);
  font-size:.75rem;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.meta-card strong{display:block;font-size:1.05rem;margin-bottom:8px}
.meta-card p{margin:0;color:var(--muted);line-height:1.65}
.hero-visual{
  display:flex;
  flex-direction:column;
  gap:16px;
  align-items:flex-end;
}
.hero-visual-card{overflow:hidden}
.editor-card{
  width:100%;
}
.palette-stack-card{
  width:min(420px, 72%);
}
.visual-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:14px 18px;
  border-bottom:1px solid var(--line);
  color:var(--muted);
  font-size:.92rem;
}
.visual-head strong{color:var(--text)}
.hero-visual-card img{width:100%;height:auto}
.palette-stack-card img{
  width:100%;
  height:auto;
  padding:18px;
  background:#efefef;
  object-fit:contain;
}
@media (max-width: 820px){
  .palette-stack-card{width:100%;}
}
.hero-palette-stack{
  display:grid;
  gap:14px;
}
.hero-palette-stack img,
.sample-card img{
  width:100%;
  height:auto;
  border-radius:16px;
  background:#f0f0f0;
}
.hero-palette-stack img{
  background:#fff;
  border:1px solid var(--line);
  box-shadow:0 10px 22px rgba(0,0,0,.04);
}

.suite-card{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:18px;
  padding:24px 26px;
}
.suite-card h2{margin:.2rem 0 0;font-size:1.8rem}
.suite-list{display:grid;grid-template-columns:repeat(3, minmax(0,1fr));gap:12px;flex:1}
.suite-item{
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:16px;
  border-radius:16px;
  border:1px solid var(--line);
  background:var(--surface-2);
}
.suite-item strong{font-size:1rem}
.suite-item span{color:var(--muted);font-size:.92rem}
.suite-item.current{background:var(--accent-soft);border-color:#ffd7da}
.suite-item.current strong{color:var(--accent-dark)}

.section-heading{margin:56px 0 18px}
.section-heading h2{margin:0;font-size:2.2rem;letter-spacing:-.04em}
.split-heading{
  display:flex;
  justify-content:space-between;
  gap:24px;
  align-items:end;
}
.section-copy{max-width:52ch;color:var(--muted);line-height:1.75;margin:0}

.palette-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:16px;
}
.sample-card,
.editor-sample{padding:14px}
.sample-card figcaption,
.editor-sample figcaption{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-bottom:12px;
}
.sample-card strong,
.editor-sample strong{font-size:1.02rem}
.sample-card span,
.editor-sample span{color:var(--muted);font-size:.94rem;line-height:1.55}
.sample-card{overflow:hidden}
.tall-card img{margin-inline:auto;width:auto;max-width:100%}

.feature-columns{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
  margin-top:20px;
}
.feature-panel{padding:22px}
.muted-surface{background:linear-gradient(180deg, #fff 0%, #fbfbfb 100%)}
.panel-head{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:16px;
}
.panel-head h3{margin:0;font-size:1.35rem}
.badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:30px;
  padding:0 12px;
  border-radius:999px;
  background:var(--accent-soft);
  color:var(--accent-dark);
  font-size:.76rem;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.badge.alt{background:#f4f4f4;color:#39404a}
.feature-list{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.feature-list.single{grid-template-columns:1fr}
.feature-card{
  padding:18px;
  border:1px solid var(--line);
  border-radius:16px;
  background:var(--surface-2);
}
.feature-card h4{margin:0 0 8px;font-size:1rem}
.feature-card p{margin:0;color:var(--muted);line-height:1.7}

.editor-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}
.wide-card img{
  width:100%;
  height:auto;
  border-radius:16px;
  border:1px solid var(--line);
}

.spec-panels{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
}
.spec-panel{padding:24px}
.spec-block + .spec-block{margin-top:24px}
.spec-block h4{margin:0 0 12px;font-size:1.02rem}
.spec-list{
  display:grid;
  gap:10px;
  margin:0;
}
.spec-list div{
  display:grid;
  grid-template-columns:132px 1fr;
  gap:14px;
  padding:12px 0;
  border-top:1px solid var(--line);
}
.spec-list.compact div{grid-template-columns:120px 1fr}
.spec-list div:first-child{border-top:1px solid var(--line-strong)}
dt{font-weight:800}
dd{margin:0;color:var(--muted);line-height:1.68}

.download-card{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px;
  padding:28px;
}
.download-card h2{margin:.15rem 0 .55rem;font-size:2rem;letter-spacing:-.03em}
.download-card p{margin:0;max-width:60ch;color:var(--muted);line-height:1.75}
.download-actions{display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.download-note{font-size:.92rem}

.site-footer{
  max-width:var(--content);
  margin:0 auto;
  padding:6px 24px 34px;
  display:flex;
  justify-content:space-between;
  gap:16px;
  color:var(--muted);
  font-size:.95rem;
}
.site-footer strong{display:block;color:var(--text);margin-bottom:4px}

@media (max-width: 1160px){
  .hero,
  .feature-columns,
  .spec-panels,
  .editor-grid{grid-template-columns:1fr}
  .hero-visual{align-items:flex-start}
  .palette-grid{grid-template-columns:repeat(2, minmax(0,1fr))}
  .suite-card{flex-direction:column;align-items:flex-start}
  .suite-list{width:100%}
  .split-heading{flex-direction:column;align-items:flex-start}
  .download-card{flex-direction:column;align-items:flex-start}
  .download-actions{align-items:flex-start}
}
@media (max-width: 820px){
  .site-header{padding:16px;flex-direction:column;align-items:flex-start}
  .brand-logo{width:190px}
  .nav{width:100%;justify-content:flex-start;flex-wrap:wrap;border-radius:24px}
  .hero{padding-top:8px}
  .hero-meta-grid,
  .suite-list,
  .palette-grid{grid-template-columns:1fr}
  .hero-visual{align-items:stretch}
  .hero-palette-stack{grid-template-columns:repeat(2, minmax(0,1fr))}
  h1{max-width:none}
}
@media (max-width: 560px){
  .section{padding:0 16px}
  .site-header{padding:14px 16px 10px}
  .nav{gap:6px}
  .nav-link,.nav-trigger{padding:10px 12px}
  .hero-actions{flex-direction:column;align-items:flex-start}
  .hero-palette-stack{grid-template-columns:1fr}
  .spec-list div,
  .spec-list.compact div{grid-template-columns:1fr}
  .site-footer{padding:4px 16px 24px;flex-direction:column}
}