:root{
  --bg:#f2f8f4; --card:#fff; --text:#12291c; --muted:#5f7268; --ring:#e3efe7;
  --brand:#009a4e; --brand-d:#007a3d;
  --shadow:0 10px 30px rgba(18,41,28,.08); --r:18px;
}
@media (prefers-color-scheme: dark){
  :root{ --bg:#0e1512; --card:#16211b; --text:#e9f4ed; --muted:#9fb6a9; --ring:#22322a; --shadow:0 10px 30px rgba(0,0,0,.4); }
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
body{margin:0; font-family:'Peyda','Vazirmatn',system-ui,Tahoma,sans-serif; background:var(--bg); color:var(--text)}
.wrap{max-width:540px; margin:0 auto; padding:14px 16px 100px; display:flex; flex-direction:column; gap:18px}
a{color:inherit; text-decoration:none}
a:focus-visible,button:focus-visible{outline:3px solid rgba(0,154,78,.5); outline-offset:2px; border-radius:12px}
img{max-width:100%}

/* ── هدر: نوار + کاور + آواتار ── */
.cover-wrap{background:var(--card); border-radius:26px; overflow:hidden; box-shadow:var(--shadow); border:1px solid var(--ring)}
.topbar{display:flex; align-items:center; justify-content:space-between; padding:10px 14px}
.tb-brand{display:flex; align-items:center; gap:8px; font-weight:800; font-size:13px}
.tb-brand img{width:26px; height:26px; border-radius:8px; object-fit:cover; background:#fff}
.tb-share{width:38px; height:38px; border-radius:12px; border:1px solid var(--ring); background:transparent; color:var(--text); display:grid; place-items:center; cursor:pointer; transition:transform .12s}
.tb-share:active{transform:scale(.9)}
.cover{width:100%; height:170px; object-fit:cover; display:block}
.cover.hide{display:none}
.hero-body{text-align:center; padding:0 16px 24px; margin-top:-52px; position:relative}
.cover.hide + .hero-body, .hero-body{margin-top:0}
.cover:not(.hide) + .hero-body{margin-top:-52px}
.avatar{width:104px; height:104px; border-radius:50%; border:5px solid var(--card); box-shadow:0 10px 26px rgba(18,41,28,.22); background:#fff; object-fit:cover}
.hero-body h1{font-size:20px; font-weight:800; margin:12px 0 2px}
.slogan{color:var(--brand); font-weight:700; font-size:13px; margin:0}
.desc{color:var(--muted); font-size:12px; margin:6px 0 0}

/* ── دایره‌های سریع ── */
.qa-row{display:flex; justify-content:center; gap:14px; margin-top:-8px}
.qa{width:58px; height:58px; border-radius:50%; display:grid; place-items:center; background:var(--card); color:var(--brand); box-shadow:0 10px 24px rgba(18,41,28,.16); border:1px solid var(--ring); transition:transform .12s}
.qa:active{transform:scale(.9)}
.qa.fill-g{background:var(--brand); color:#fff; border:0}
.qa.fill-wa{background:#1ebe57; color:#fff; border:0}
.qa img{width:26px; height:26px; object-fit:contain}

/* ── CTA ── */
.cta-row{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:54px; border-radius:15px; border:0; font:inherit; font-weight:700; font-size:14.5px; cursor:pointer; transition:transform .12s, filter .15s; padding:0 10px}
.btn:active{transform:scale(.97)}
.btn:hover{filter:brightness(1.05)}
.btn-call{background:var(--brand); color:#fff; box-shadow:0 10px 24px rgba(0,154,78,.3)}
.btn-wa{background:#1ebe57; color:#fff; box-shadow:0 10px 24px rgba(30,190,87,.28)}

/* ── عنوان بخش ── */
.sec-title{font-size:15px; font-weight:800; margin:0 0 10px; border:0; padding:0}

/* ── کارت‌های شبکه اجتماعی ── */
.stack{display:flex; flex-direction:column; gap:10px}
.s-card{display:flex; align-items:center; gap:12px; background:var(--card); border:1px solid var(--ring); border-radius:16px; padding:11px 14px; min-height:64px; box-shadow:var(--shadow); transition:transform .13s}
.s-card:active{transform:scale(.98)}
@media (hover:hover){ .s-card:hover{transform:translateY(-2px)} }
.s-logo{flex:none; width:46px; height:46px; border-radius:13px; background:#fff; border:1px solid var(--ring); padding:7px; object-fit:contain}
.s-ico{flex:none; width:46px; height:46px; border-radius:13px; display:grid; place-items:center; background:var(--c,#009a4e); box-shadow:0 6px 14px rgba(0,0,0,.12)}
.tt{display:flex; flex-direction:column; gap:2px; min-width:0}
.tt b{font-size:14px; font-weight:700}
.tt small{color:var(--muted); font-size:11px}
.arr{margin-inline-start:auto; color:var(--muted); font-size:20px; transition:transform .15s}
.s-card:hover .arr{transform:translateX(-4px)}

/* ── لیست تماس ── */
.card{background:var(--card); border:1px solid var(--ring); border-radius:var(--r); box-shadow:var(--shadow); overflow:hidden}
.list{display:flex; flex-direction:column}
.row{display:flex; align-items:center; gap:12px; padding:12px 14px; min-height:58px; border-bottom:1px solid var(--ring)}
.row:last-child{border-bottom:0}
a.row:active{background:rgba(0,154,78,.06)}
.ico{flex:none; width:42px; height:42px; border-radius:12px; display:grid; place-items:center; font-size:18px; color:#fff; background:var(--c,#009a4e)}
.sep{font-style:normal; color:var(--muted); margin:0 4px}

/* ── پرداخت ── */
.pay-card{background:linear-gradient(135deg,#0c3b23,#0f5231 55%,#11603a); color:#eafff2; border-radius:22px; padding:18px 16px; box-shadow:0 16px 40px rgba(12,59,35,.35); border:1px solid rgba(255,255,255,.08)}
.pay-head{display:flex; align-items:center; gap:10px}
.bank-chip{width:38px; height:28px; border-radius:6px; background:linear-gradient(135deg,#f4c542,#e0a63a)}
.pay-head b{font-size:14px}
.pay-head small{margin-inline-start:auto; opacity:.85; font-size:11.5px}
.pay-num{font-size:19px; font-weight:800; letter-spacing:1.5px; margin:18px 4px 14px; font-variant-numeric:tabular-nums}
.pay-actions{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.btn-pay{min-height:46px; background:rgba(255,255,255,.14); color:#fff; border:1px solid rgba(255,255,255,.18); font-size:12.5px}
.pay-sheba{margin-top:12px; font-size:11px; opacity:.9; display:flex; gap:6px; align-items:center; flex-wrap:wrap}
.pay-sheba span{letter-spacing:.5px; font-weight:600}
.btn-qr{width:100%; margin-top:12px; min-height:44px; background:transparent; border:1px dashed rgba(255,255,255,.35); color:#d8ffe9; font-size:12.5px}
.qr-box{margin-top:12px; background:#fff; border-radius:14px; padding:12px; display:grid; place-items:center}
.qr-box img{width:180px; height:180px}
.qr-box p{color:#333; font-size:12px; margin:8px 0 0}

/* ── Footer ── */
footer{text-align:center; color:var(--muted); font-size:12px; display:flex; flex-direction:column; gap:4px}
footer b{color:var(--text); font-size:14px}
footer a{color:var(--brand); font-weight:700}

/* ── نوار پایین ── */
.dock{position:fixed; bottom:14px; right:50%; transform:translateX(50%); width:min(508px, calc(100% - 32px)); display:flex; gap:8px; z-index:40; background:rgba(255,255,255,.85); backdrop-filter:blur(12px); border:1px solid var(--ring); border-radius:20px; padding:8px; box-shadow:0 16px 40px rgba(18,41,28,.2)}
@media (prefers-color-scheme: dark){ .dock{background:rgba(22,33,27,.85)} }
.dock .btn{min-height:48px; border-radius:14px; font-size:12.5px}
.dock-main{flex:1.2; background:var(--brand); color:#fff}
.dock-btn{flex:1; background:transparent; color:var(--text); border:1px solid var(--ring)}

/* ── Toast ── */
.toast{position:fixed; bottom:86px; right:50%; transform:translate(50%,16px); background:#123527; color:#eafff2; padding:10px 22px; border-radius:999px; font-size:13px; font-weight:700; opacity:0; pointer-events:none; transition:all .25s; box-shadow:0 10px 30px rgba(0,0,0,.3); z-index:99}
.toast.show{opacity:1; transform:translate(50%,0)}

/* ── انیمیشن ── */
.anim{animation:up .5s ease both}
.d1{animation-delay:.07s}.d2{animation-delay:.14s}.d3{animation-delay:.2s}.d4{animation-delay:.26s}.d5{animation-delay:.32s}.d6{animation-delay:.38s}
@keyframes up{from{opacity:0; transform:translateY(14px)}to{opacity:1; transform:none}}
.dock.anim{animation-name:upc}
@keyframes upc{from{opacity:0; transform:translate(50%,14px)}to{opacity:1; transform:translateX(50%)}}
@media (prefers-reduced-motion: reduce){*{animation:none!important; transition:none!important}}
@media (min-width:768px){ .wrap{padding-top:36px} .hero-body h1{font-size:24px} }

/* == v5: full-bleed cover == */
.cover-wrap{margin-inline:-16px; border-radius:0 0 26px 26px; border-inline:0; border-top:0}
.cover{height:200px; border:0}
.topbar{padding-inline:18px}

/* == v6: titles no border + cover fade == */
.sec-title{font-size:15px; font-weight:800; margin:0 0 10px; border:0; padding:0}
.cover{
  -webkit-mask-image:linear-gradient(180deg,#000 70%,transparent 100%);
          mask-image:linear-gradient(180deg,#000 70%,transparent 100%);
}

/* == v8: hero text without card == */
.cover-wrap{background:transparent; border:0; box-shadow:none; border-radius:0; overflow:visible}
.topbar{background:var(--card); border:1px solid var(--ring); border-radius:16px; box-shadow:var(--shadow); margin-bottom:10px}
.cover{border-radius:22px}
.hero-body{background:transparent; padding-bottom:4px}

/* == v9: real bank cards + accordion == */
.bcard{background:var(--card); border:1px solid var(--ring); border-radius:18px; box-shadow:var(--shadow); overflow:hidden; margin-bottom:10px}
.bcard-head{display:flex; align-items:center; gap:10px; width:100%; padding:12px 14px; background:transparent; border:0; cursor:pointer; font:inherit; color:var(--text); text-align:right}
.bank-logo{width:36px; height:36px; border-radius:10px; object-fit:contain; background:#fff; border:1px solid var(--ring); padding:5px}
.bank-badge{width:36px; height:36px; border-radius:10px; background:var(--brand); color:#fff; display:none; place-items:center; font-size:10px; font-weight:800}
.bh-tt{display:flex; flex-direction:column; gap:2px}
.bh-tt b{font-size:14px}
.bh-tt small{color:var(--muted); font-size:11px}
.chev{margin-inline-start:auto; color:var(--muted); transition:transform .2s}
.bcard.open .chev{transform:rotate(180deg)}
.bcard-body{display:none; padding:0 14px 14px}
.bcard.open .bcard-body{display:block; animation:up .3s ease}

/* کارت بانکی واقعی */
.bank-card{border-radius:18px; padding:16px 16px 14px; color:#fff; position:relative; overflow:hidden; box-shadow:0 14px 34px rgba(0,0,0,.25); margin-bottom:10px}
.bank-card::before{content:''; position:absolute; inset:auto -70px -110px auto; width:240px; height:240px; border-radius:50%; background:rgba(255,255,255,.09)}
.bc-blu{background:linear-gradient(135deg,#0b1f5c,#2743e3 60%,#4f6bff)}
.bc-kar{background:linear-gradient(135deg,#4a2c00,#b06f1f 60%,#d99a3a)}
.bc-top{display:flex; justify-content:space-between; align-items:center}
.bc-chip{width:40px; height:30px; border-radius:6px; background:linear-gradient(135deg,#f4c542,#e0a63a); box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)}
.bc-bank{font-weight:800; font-size:13px; opacity:.95}
.bc-num{font-size:18px; letter-spacing:2px; font-weight:800; margin:20px 0 14px; font-variant-numeric:tabular-nums; text-shadow:0 1px 0 rgba(0,0,0,.25)}
.bc-bottom{display:flex; justify-content:space-between; font-size:11.5px; opacity:.92}
.sheba-line{margin-top:10px; font-size:11px; color:var(--muted); display:flex; gap:6px; align-items:center; flex-wrap:wrap}
.sheba-line span{font-weight:600; letter-spacing:.5px; color:var(--text)}

/* == v10: taavon + dnd + copy-on-card == */
.bc-kar{background:linear-gradient(135deg,#003a45,#00798c 60%,#00a3b8)}
.bc-copy{margin-inline-start:8px; width:30px; height:30px; border-radius:9px; border:1px solid rgba(255,255,255,.35); background:rgba(255,255,255,.14); color:#fff; display:inline-grid; place-items:center; cursor:pointer; vertical-align:middle; transition:transform .12s}
.bc-copy:active{transform:scale(.88)}
.bcard-list{display:flex; flex-direction:column}
.bcard-head{cursor:grab}
.bcard.dragging{opacity:.45; border:1.5px dashed var(--brand)}

/* == v10: taavon + dnd + copy-on-card == */
.bc-kar{background:linear-gradient(135deg,#003a45,#00798c 60%,#00a3b8)}
.bc-copy{margin-inline-start:8px; width:30px; height:30px; border-radius:9px; border:1px solid rgba(255,255,255,.35); background:rgba(255,255,255,.14); color:#fff; display:inline-grid; place-items:center; cursor:pointer; vertical-align:middle; transition:transform .12s}
.bc-copy:active{transform:scale(.88)}
.bcard-list{display:flex; flex-direction:column}
.bcard-head{cursor:grab}
.bcard.dragging{opacity:.45; border:1.5px dashed var(--brand)}

/* == v11: realistic bank cards == */
.bank-card{
  aspect-ratio: 1.6/1;
  border-radius:18px;
  padding:16px 18px;
  color:#fff;
  position:relative;
  overflow:hidden;
  box-shadow:0 14px 34px rgba(0,0,0,.28), 0 4px 10px rgba(0,0,0,.12);
  display:flex; flex-direction:column; justify-content:space-between;
  font-variant-numeric:tabular-nums;
}
.bank-card::before,.bank-card::after{content:''; position:absolute; border-radius:50%; background:rgba(255,255,255,.07)}
.bank-card::before{width:260px; height:260px; top:-90px; right:-70px}
.bank-card::after{width:180px; height:180px; bottom:-80px; left:-50px; background:rgba(255,255,255,.05)}

.bc-blu{background:linear-gradient(135deg,#1a2980 0%,#2743e3 60%,#4f6bff 100%)}
.bc-taavon{background:linear-gradient(135deg,#00303f 0%,#00627a 50%,#00a3b8 100%)}

.bc-top{display:flex; justify-content:space-between; align-items:center; position:relative; z-index:2}
.bc-logo{width:44px; height:44px; object-fit:contain; background:rgba(255,255,255,.95); border-radius:10px; padding:6px; box-shadow:0 4px 10px rgba(0,0,0,.15)}
.bc-brand{font-size:20px; font-weight:800; letter-spacing:1.5px; text-shadow:0 1px 0 rgba(0,0,0,.25)}

.bc-mid{position:relative; z-index:2; flex:1; display:flex; align-items:center}
.bc-num{
  display:grid; grid-template-columns:repeat(4, 1fr) auto; gap:6px; align-items:center; width:100%;
  font-size:17px; font-weight:700; letter-spacing:1.2px;
}
.bc-num span{background:rgba(255,255,255,.08); border-radius:8px; padding:6px 0; text-align:center; text-shadow:0 1px 0 rgba(0,0,0,.3)}
.bc-copy{
  width:34px; height:34px; border-radius:9px; border:0; background:rgba(255,255,255,.18); backdrop-filter:blur(4px);
  color:#fff; display:grid; place-items:center; cursor:pointer; transition:transform .12s, background .2s;
}
.bc-copy:hover{background:rgba(255,255,255,.28)}
.bc-copy:active{transform:scale(.88)}

.bc-bot{display:flex; justify-content:space-between; align-items:flex-end; position:relative; z-index:2; gap:8px}
.bc-bot > div{display:flex; flex-direction:column; gap:2px}
.bc-bot small{font-size:9.5px; opacity:.75; font-weight:500; letter-spacing:.5px}
.bc-bot b{font-size:12.5px; font-weight:700; text-shadow:0 1px 0 rgba(0,0,0,.3)}
.bc-net{font-size:13px; font-weight:800; letter-spacing:1px; opacity:.95; font-style:italic}

/* ردیف شبا */
.sheba-row{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  background:var(--card); border:1px solid var(--ring); border-radius:12px;
  padding:10px 12px; margin-top:10px;
}
.sh-lbl{font-size:11px; color:var(--muted); font-weight:700}
.sh-num{font-size:11.5px; font-weight:600; letter-spacing:.5px; color:var(--text); flex:1; min-width:0}
.btn-copy-s{
  flex:none; min-height:34px; padding:0 12px; border-radius:9px;
  background:var(--brand); color:#fff; font-size:12px; font-weight:700;
  border:0; cursor:pointer; display:inline-flex; align-items:center; gap:5px; transition:transform .12s;
}
.btn-copy-s:active{transform:scale(.95)}

/* == v11: real sample-like bank card == */
.bank-card{direction:ltr; aspect-ratio:1.62; border-radius:20px; padding:18px; color:#fff; position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:space-between; box-shadow:0 16px 40px rgba(0,0,0,.28); margin:4px 0 6px}
.bank-card::before{content:''; position:absolute; top:-80px; right:-80px; width:230px; height:230px; border-radius:50%; background:rgba(255,255,255,.10)}
.bank-card::after{content:''; position:absolute; bottom:-90px; left:-70px; width:210px; height:210px; border-radius:50%; background:rgba(255,255,255,.07)}
.bc-blu{background:linear-gradient(135deg,#0b1f5c 0%,#2743e3 55%,#4f6bff 100%)}
.bc-kar{background:linear-gradient(135deg,#003a45 0%,#00798c 55%,#00a3b8 100%)}
.bc-top{display:flex; align-items:center; justify-content:space-between; position:relative; z-index:1}
.bc-chip{width:46px; height:34px; border-radius:7px; background:linear-gradient(135deg,#f6d375,#d9a83c); position:relative; box-shadow:inset 0 0 0 1px rgba(0,0,0,.18)}
.bc-chip::before{content:''; position:absolute; inset:6px 5px; border:1.5px solid rgba(0,0,0,.28); border-radius:4px}
.bc-chip::after{content:''; position:absolute; left:50%; top:6px; bottom:6px; width:1.5px; background:rgba(0,0,0,.28)}
.bc-brand{display:flex; align-items:center; gap:7px; font-weight:800; font-size:13px; letter-spacing:.5px}
.bc-brand img{width:30px; height:30px; border-radius:8px; background:#fff; padding:4px; object-fit:contain}
.bc-num{font-size:clamp(15px,4.6vw,19px); letter-spacing:2.5px; font-weight:800; text-shadow:0 2px 2px rgba(0,0,0,.28); font-variant-numeric:tabular-nums; display:flex; align-items:center; justify-content:center; gap:8px; position:relative; z-index:1; margin:0}
.bc-sheba-row{display:flex; align-items:center; justify-content:center; gap:8px; font-size:10.5px; letter-spacing:.6px; opacity:.95; position:relative; z-index:1}
.bc-bottom{display:flex; align-items:flex-end; justify-content:space-between; position:relative; z-index:1}
.bc-owner{font-size:12px; font-weight:700; text-shadow:0 1px 1px rgba(0,0,0,.25)}
.bc-circles{display:flex; align-items:center}
.bc-circles i{width:26px; height:26px; border-radius:50%; background:#eb001b; box-shadow:0 2px 6px rgba(0,0,0,.25)}
.bc-circles i + i{background:#00a3e8; margin-left:-10px; opacity:.92}
.bc-copy{flex:none; width:32px; height:32px; border-radius:10px; border:1px solid rgba(255,255,255,.4); background:rgba(255,255,255,.16); color:#fff; display:inline-grid; place-items:center; cursor:pointer; transition:transform .12s; backdrop-filter:blur(3px)}
.bc-copy:active{transform:scale(.86)}

/* == v12: cards slider (swipe) == */
.cards-slider{
  display:flex; overflow-x:auto; scroll-snap-type:x mandatory;
  gap:12px; margin-inline:-16px; padding:4px 16px 8px;
  scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.cards-slider::-webkit-scrollbar{display:none}
.slide{flex:0 0 100%; scroll-snap-align:center; min-width:0}
.slider-dots{display:flex; justify-content:center; gap:7px; margin:2px 0 12px}
.dot{width:8px; height:8px; border-radius:999px; border:0; padding:0; background:#c8d8cd; cursor:pointer; transition:all .25s}
.dot.on{width:22px; background:var(--brand)}

/* == v13: copy buttons under card == */
.pay-actions{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:10px}
.pay-actions .btn-copy-s{min-height:46px; border-radius:12px; font-size:12.5px; justify-content:center; width:100%}
.btn-copy-s{background:var(--brand); color:#fff; border:0; cursor:pointer; display:inline-flex; align-items:center; gap:6px; font:inherit; font-weight:700; transition:transform .12s, filter .15s}
.btn-copy-s:active{transform:scale(.96)}
.btn-copy-s:hover{filter:brightness(1.06)}

/* == v14: sheba on card + minimal buttons == */
.bc-sheba{
  font-size:10.5px; letter-spacing:1.2px; opacity:.88; font-weight:600;
  margin:-6px 0 10px; position:relative; z-index:2;
  text-shadow:0 1px 0 rgba(0,0,0,.25);
}
.bc-sheba::before{content:'IRAN • SHEBA'; display:block; font-size:8px; letter-spacing:2px; opacity:.7; margin-bottom:2px}
.btn-copy-s{
  background:var(--card) !important; color:var(--muted) !important;
  border:1px solid var(--ring) !important; box-shadow:none !important;
  font-weight:600 !important; border-radius:12px;
}
.btn-copy-s:hover{color:var(--brand) !important; border-color:var(--brand) !important}
.btn-copy-s:active{transform:scale(.97)}


/* == v17: Peyda weights == */
body{font-weight:400}
.tt small, .desc, .sh-num, .bc-sheba, footer, .bh-tt small{font-weight:400}
.tt b, .row .tt b, .btn, .btn-copy-s, .sec-title, .slogan, .tb-brand{font-weight:800}
h1, .hero-body h1, footer b{font-weight:900}
.bc-num, .bc-brand, .pay-num{font-weight:800}
.bc-bot small, .sh-lbl{font-weight:500}

/* == v18: unified quick actions == */
.qa-row{display:flex; justify-content:center; gap:14px; margin-top:-6px}
.qa{display:flex; flex-direction:column; align-items:center; gap:6px; background:transparent; border:0; box-shadow:none; width:auto; height:auto; border-radius:0; color:var(--brand); place-items:initial}
.qa-ic{
  width:58px; height:58px; border-radius:18px;
  display:grid; place-items:center;
  background:var(--card); color:var(--brand);
  border:1px solid var(--ring); box-shadow:var(--shadow);
  transition:transform .12s, background .2s;
}
.qa small{font-size:10.5px; color:var(--muted); font-weight:500; display:block}
.qa:active .qa-ic{transform:scale(.9)}
@media (hover:hover){ .qa:hover .qa-ic{background:rgba(0,154,78,.08)} }

/* == v19: hide qa labels == */
.qa small{display:none}

/* == SEO version: services + FAQ == */
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}

/* Services Grid */
.services-grid{display:grid; grid-template-columns:repeat(2, 1fr); gap:10px}
.svc{
  display:flex; align-items:center; gap:10px; padding:14px 12px;
  background:var(--card); border:1px solid var(--ring); border-radius:14px;
  box-shadow:var(--shadow); transition:transform .13s;
}
.svc:active{transform:scale(.96)}
.svc-ic{font-size:22px; flex:none}
.svc b{font-size:13px; font-weight:600}

/* About */
.about-card{
  background:var(--card); border:1px solid var(--ring); border-radius:16px;
  padding:18px 16px; box-shadow:var(--shadow); line-height:1.9; font-size:13.5px;
}
.about-card p{margin:0 0 10px}
.about-card p:last-child{margin:0}

/* FAQ */
.faq-list{display:flex; flex-direction:column; gap:8px}
.faq{
  background:var(--card); border:1px solid var(--ring); border-radius:14px;
  overflow:hidden; box-shadow:var(--shadow);
}
.faq summary{
  padding:14px 16px; font-weight:700; font-size:14px; cursor:pointer;
  list-style:none; display:flex; justify-content:space-between; align-items:center;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'＋'; font-size:18px; color:var(--brand); transition:transform .2s}
.faq[open] summary::after{content:'－'}
.faq-answer{padding:0 16px 14px; font-size:13px; line-height:1.9; color:var(--muted)}
.faq-answer a{color:var(--brand); font-weight:600}

/* Dock */
.dock{display:flex; gap:8px}
.dock .btn{flex:1; min-height:48px; border-radius:14px; font-size:12.5px}

/* == v20: service icons (no emoji) == */
.svc-ic{
  width:44px; height:44px; border-radius:12px; flex:none;
  display:grid; place-items:center;
  background:rgba(0,154,78,.1); color:var(--brand);
  transition:transform .2s, background .2s;
}
.svc:hover .svc-ic{background:rgba(0,154,78,.18); transform:scale(1.06)}
.svc:active .svc-ic{transform:scale(.92)}