.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  padding:var(--space-3) var(--space-5);
  border-radius:var(--radius-md);
  font-size:var(--fs-sm);font-weight:600;line-height:1;
  border:1px solid transparent;
  transition:background var(--transition-fast),color var(--transition-fast),border-color var(--transition-fast),box-shadow var(--transition-fast);
  text-align:center;white-space:nowrap;
}
.btn:focus-visible{box-shadow:var(--shadow-focus)}
.btn-primary{background:var(--color-primary);color:var(--color-white)}
.btn-primary:hover{background:var(--color-primary-dark);color:var(--color-white)}
.btn-secondary{background:var(--color-white);color:var(--color-primary);border-color:var(--color-border-strong)}
.btn-secondary:hover{border-color:var(--color-primary);color:var(--color-primary-dark)}
.btn-ghost{background:transparent;color:var(--color-text)}
.btn-ghost:hover{background:var(--color-bg-muted)}
.btn-lg{padding:var(--space-4) var(--space-6);font-size:var(--fs-base)}
.btn-sm{padding:var(--space-2) var(--space-4);font-size:var(--fs-sm)}

.tool-card{background:var(--color-white);border:1px solid var(--color-border);border-radius:var(--radius-lg);transition:border-color var(--transition),box-shadow var(--transition),transform var(--transition)}
.tool-card:hover{border-color:var(--color-primary);box-shadow:var(--shadow-md);transform:translateY(-2px)}
.tool-card a{display:block;padding:var(--space-5)}
.tool-icon{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:var(--radius-md);background:var(--color-light-blue);color:var(--color-primary);margin-bottom:var(--space-4)}
.tool-card h3{font-size:var(--fs-lg);margin-bottom:var(--space-2)}
.tool-card p{color:var(--color-text-muted);font-size:var(--fs-sm);line-height:1.55}

.category-card{position:relative;background:var(--color-white);border:1px solid var(--color-border);border-radius:var(--radius-lg);transition:border-color var(--transition),box-shadow var(--transition),transform var(--transition)}
.category-card:hover{border-color:var(--color-primary);box-shadow:var(--shadow-md);transform:translateY(-2px)}
.category-card a{display:block;padding:var(--space-5)}
.category-card h3{margin-bottom:var(--space-2);font-size:var(--fs-lg)}
.category-card p{color:var(--color-text-muted);font-size:var(--fs-sm);line-height:1.55;margin-right:var(--space-6)}
.card-arrow{position:absolute;right:var(--space-5);bottom:var(--space-5);color:var(--color-primary);font-size:var(--fs-lg);transition:transform var(--transition)}
.category-card:hover .card-arrow{transform:translateX(4px)}

.step-card{background:var(--color-white);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-6)}
.step-num{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:var(--radius-full);background:var(--color-primary);color:var(--color-white);font-weight:700;margin-bottom:var(--space-4)}
.step-card h3{margin-bottom:var(--space-2);font-size:var(--fs-lg)}
.step-card p{color:var(--color-text-muted);font-size:var(--fs-sm)}

.why-card{background:var(--color-white);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-5)}
.why-card h3{font-size:var(--fs-base);margin-bottom:var(--space-2)}
.why-card p{color:var(--color-text-muted);font-size:var(--fs-sm);line-height:1.55}

.usecase{background:var(--color-bg-subtle);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-6)}
.usecase h3{font-size:var(--fs-lg);margin-bottom:var(--space-2)}
.usecase p{color:var(--color-text-muted);font-size:var(--fs-sm);line-height:1.6}
.usecase-links{margin-top:var(--space-3);font-size:var(--fs-sm);color:var(--color-primary)}
.usecase-links a{font-weight:600}

.formats-grid li{background:var(--color-white);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-5)}
.formats-grid strong{display:block;color:var(--color-primary);font-size:var(--fs-sm);text-transform:uppercase;letter-spacing:0.05em;margin-bottom:var(--space-2)}
.formats-grid span{color:var(--color-text-muted);font-size:var(--fs-sm)}

.featured-grid a{display:block;padding:var(--space-5);background:var(--color-white);border:1px solid var(--color-border);border-radius:var(--radius-lg);transition:border-color var(--transition),box-shadow var(--transition)}
.featured-grid a:hover{border-color:var(--color-primary);box-shadow:var(--shadow-md)}
.featured-grid strong{display:block;margin-bottom:var(--space-2)}
.featured-grid span{display:block;color:var(--color-text-muted);font-size:var(--fs-sm)}

.guides-grid a{display:block;padding:var(--space-5);background:var(--color-white);border:1px solid var(--color-border);border-radius:var(--radius-lg);transition:border-color var(--transition),box-shadow var(--transition)}
.guides-grid a:hover{border-color:var(--color-primary);box-shadow:var(--shadow-md)}
.guides-grid strong{display:block;margin-bottom:var(--space-2)}
.guides-grid span{display:block;color:var(--color-text-muted);font-size:var(--fs-sm)}
.section-cta{text-align:center;margin-top:var(--space-8)}

.faq-container{max-width:900px;margin-inline:auto}
.faq-list{display:grid;gap:var(--space-3)}
.faq-item{background:var(--color-white);border:1px solid var(--color-border);border-radius:var(--radius-md);overflow:hidden}
.faq-item summary{padding:var(--space-4) var(--space-5);font-weight:600;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:var(--space-3);color:var(--color-text)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";font-size:var(--fs-xl);color:var(--color-primary);font-weight:400;line-height:1}
.faq-item[open] summary::after{content:"−"}
.faq-item summary:hover{background:var(--color-bg-subtle)}
.faq-body{padding:0 var(--space-5) var(--space-5);color:var(--color-text-muted);font-size:var(--fs-sm);line-height:1.65}
.faq-body a{font-weight:600}

.skip-link{position:absolute;left:-9999px;top:0;background:var(--color-primary);color:var(--color-white);padding:var(--space-3) var(--space-4);z-index:100;border-radius:0 0 var(--radius-md) 0}
.skip-link:focus{left:0}