/* ========== 基本變數 ========== */
:root{
    --dv-bg: #0b0e13;
    --dv-card: #121722;
    --dv-text: #e8eefc;
    --dv-dim: #a9b3c8;
    --dv-accent: #4da3ff;
    --dv-accent-2: #7cffda;
    --dv-border: #1f2533;
    --dv-shadow: 0 10px 30px rgba(0,0,0,.35);
    --radius-xl: 18px;
    --radius-md: 12px;
  }
  
  /* ========== 全局 ========== */
  body{
    background: var(--dv-bg);
    color: var(--dv-text);
  }
  .dv-page{
    padding-block: 28px 64px;
  }
  .dv-container{
    /* 關鍵：內容置中 */
    max-width: 1100px;
    margin-inline: auto;
    padding-inline: 20px;
  }
  
  /* ========== Hero ========== */
  .dv-hero{
    padding-block: 48px 24px;
    background: radial-gradient(1000px 400px at 50% -100px, #173056 0%, rgba(11,14,19,0) 70%);
  }
  .dv-hero__title{
    font-size: clamp(28px, 4.2vw, 44px);
    line-height: 1.15;
    letter-spacing: .2px;
    text-align: center;
    margin: 0 0 10px;
  }
  .dv-hero__subtitle{
    max-width: 760px;
    margin: 0 auto 22px;
    text-align: center;
    color: var(--dv-dim);
    font-size: 16px;
  }
  .dv-hero__actions{
    display: flex;
    gap: 12px;
    justify-content: center;
  }
  
  /* ========== Buttons & Links ========== */
  .dv-btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 18px;
    border-radius: 999px;
    border: 1px solid var(--dv-border);
    text-decoration: none;
    font-weight: 600;
    transition: transform .12s ease, background .2s ease, border-color .2s ease;
    will-change: transform;
  }
  .dv-btn:hover{ transform: translateY(-1px); }
  .dv-btn--primary{
    background: linear-gradient(135deg, var(--dv-accent), var(--dv-accent-2));
    color: #0a0f18;
    border-color: transparent;
  }
  .dv-btn--ghost{
    background: transparent;
    color: var(--dv-text);
  }
  .dv-link{
    color: var(--dv-accent);
    text-decoration: none;
    font-weight: 600;
  }
  .dv-link:hover{ text-decoration: underline; }
  
  /* ========== Sections ========== */
  .dv-section{
    padding-block: 44px;
  }
  .dv-section--alt{
    background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0));
  }
  .dv-section__title{
    text-align: center;
    font-size: clamp(22px, 3.6vw, 32px);
    margin: 0 0 6px;
  }
  .dv-section__lead{
    text-align: center;
    color: var(--dv-dim);
    margin: 0 0 22px;
  }
  
  /* ===== Designer Intro Section ===== */
.dv-grid--2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}
@media (max-width: 860px) {
  .dv-grid--2col {
    grid-template-columns: 1fr;
  }
}

.dv-designer__image img {
  max-width: 100%;
  border-radius: var(--radius-md);
  box-shadow: var(--dv-shadow);
}

.dv-step-list {
  list-style: decimal;
  padding-left: 20px;
  color: var(--dv-dim);
  line-height: 1.7;
}
.dv-step-list li {
  margin-bottom: 10px;
}

.dv-step-list strong {
  color: var(--dv-text);
}

  /* ========== Grid (Cards) ========== */
  .dv-grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
  }
  @media (max-width: 980px){
    .dv-grid{ grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 640px){
    .dv-grid{ grid-template-columns: 1fr; }
  }
  
  .dv-card{
    background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
    border: 1px solid var(--dv-border);
    border-radius: var(--radius-xl);
    padding: 18px 16px;
    box-shadow: var(--dv-shadow);
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 220px;
    transition: transform .15s ease, border-color .2s ease, background .2s ease;
  }
  .dv-card:hover{
    transform: translateY(-4px);
    border-color: rgba(77,163,255,.6);
    background: linear-gradient(180deg, rgba(77,163,255,0.08), rgba(255,255,255,0.02));
  }
  .dv-card__icon{
    width: 44px; height: 44px;
    border-radius: 10px;
    display: grid; place-content: center;
    font-size: 22px;
    background: rgba(77,163,255,.12);
    border: 1px solid rgba(77,163,255,.35);
  }
  .dv-card__title{
    margin: 0;
    font-size: 18px;
  }
  .dv-card__text{
    margin: 0;
    color: var(--dv-dim);
    line-height: 1.6;
    flex: 1;
  }
  .dv-card__tags{
    display: flex; flex-wrap: wrap; gap: 6px;
  }
  .dv-tag{
    font-size: 12px;
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(124,255,218,.12);
    border: 1px solid rgba(124,255,218,.35);
  }
  .dv-card__actions{
    margin-top: 6px;
  }
  
  /* ========== Lists / CTA ========== */
  .dv-list{
    max-width: 820px;
    margin: 6px auto 0;
    padding-left: 18px;
    color: var(--dv-dim);
    line-height: 1.8;
  }
  .dv-cta{
    margin-top: 18px;
    display: flex;
    justify-content: center;
  }