/* ══ /website-designing/ — "Ready for SEO, AEO & GEO" (flat, light) ══ */
.sz { padding: 80px 0; background: #fff; }
.sz-head { text-align: center; max-width: 900px; margin: 0 auto 44px; }
.sz-head .subtitle_text { display: block; font-size: 18px; color: #454545; margin-bottom: 7px; }
.sz-title { display: block; font-size: 38px !important; line-height: 1.3 !important; font-weight: 700 !important; color: #3c4858; margin: 0 0 14px; }
.sz-title span { color: #f26629; }
.sz-intro { font-size: 18px; line-height: 1.667em; color: #5a6475; margin: 0; }
.sz h3 { font-size: 20px; line-height: 1.4; font-weight: 700; color: #3c4858; margin: 0 0 8px; }
.sz h3 a { color: inherit; } .sz h3 a:hover { color: #f26629; }
.sz p { font-size: 16px; line-height: 1.667em; color: #5a6475; margin: 0; }

/* 2 · tabbed pillars + row */
.sz2 { background: #f7f8fb; }
.sz2-box { display: grid; grid-template-columns: 300px 1fr; border-radius: 26px; overflow: hidden; background: #fff; border: 1px solid #eceff4; box-shadow: 0 24px 60px rgba(23,59,90,.07); }
.sz2-tabs { display: flex; flex-direction: column; gap: 8px; padding: 14px; background: #fafbfd; border-right: 1px solid #eceff4; }
.sz2-tab { display: flex; align-items: center; gap: 16px; padding: 18px 20px; border-radius: 16px; border: 1px solid transparent; background: transparent; text-align: left; cursor: pointer; transition: all .25s; }
.sz2-tab b { font-size: 26px; font-weight: 900; color: #c7ccd6; min-width: 64px; transition: color .25s; }
.sz2-tab span { font-size: 16px; font-weight: 700; color: #5a6475; }
.sz2-tab.is-on { background: #fff; border-color: #ffd9c6; box-shadow: 0 10px 24px rgba(242,102,41,.12); } .sz2-tab.is-on b { color: #f26629; } .sz2-tab.is-on span { color: #3c4858; }
.sz2-stage { padding: 40px 44px; display: flex; align-items: center; }
.sz2-pan { display: none; grid-template-columns: 200px 1fr; gap: 36px; align-items: center; } .sz2-pan.is-on { display: grid; animation: szIn .45s ease both; }
@keyframes szIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.sz2-art { width: 200px; height: 200px; border-radius: 50%; background: #fff4ee; display: flex; align-items: center; justify-content: center; } .sz2-art img { width: 130px; height: 130px; object-fit: contain; }
.sz2-pan h3 { font-size: 28px; margin-bottom: 12px; } .sz2-pan p { font-size: 18px; }
.sz2-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 22px; }
.sz2-b { padding: 26px; border-radius: 20px; background: #fff; border: 1px solid #eceff4; border-top: 3px solid #f26629; } .sz2-b img { width: 56px; height: 56px; object-fit: contain; margin-bottom: 14px; }

@media (max-width: 991px) {
  .sz-title { font-size: 30px !important; line-height: 40px !important; }
  .sz2-box, .sz2-row { grid-template-columns: 1fr; }
}
@media (max-width: 576px) {
  .sz { padding: 60px 0; } .sz-title { font-size: 22px !important; line-height: 32px !important; } .sz-intro { font-size: 16px; } .sz-head .subtitle_text { font-size: 16px; }
  .sz2-stage { padding: 24px 20px; } .sz2-pan { grid-template-columns: 1fr; gap: 18px; } .sz2-art { width: 140px; height: 140px; } .sz2-art img { width: 90px; height: 90px; } .sz2-pan h3 { font-size: 20px; } .sz2-pan p { font-size: 16px; }
  .sz2-tab { padding: 12px; gap: 8px; } .sz2-tab b { font-size: 18px; min-width: 0; } .sz2-tab span { font-size: 12px; }
}
.sz2-b img { width: 72px; height: 72px; }