/* =========================================================================
   alantouz — shared SUBPAGE styles (loaded after style.css)
   Same tokens, same language. Page hero, breadcrumb, service rows, FAQ,
   feature grids, value bands, article/legal layouts, shop.
   ========================================================================= */

/* ---- Page hero (compact, consistent with home) ---- */
.phero { position: relative; padding-top: clamp(128px, 17vh, 188px); padding-bottom: clamp(40px, 6vw, 80px); overflow: clip; }
.phero__glow { position:absolute; z-index:0; width: 60vw; height:60vw; max-width:760px; max-height:760px; right:-10vw; top:-12vw;
  background: radial-gradient(circle, rgba(52,167,123,.15), rgba(52,167,123,0) 65%); pointer-events:none; }
.phero__inner { position: relative; z-index: 2; }
.phero--split { display:grid; grid-template-columns: 1.1fr .9fr; gap: clamp(30px,5vw,64px); align-items:center; }
.phero h1 { font-family: var(--display); font-weight:800; font-size: clamp(2.3rem, 5vw, 4.2rem); line-height:1.03; letter-spacing:-0.03em; margin-top: 18px; max-width: 15ch; }
.phero h1 .accent2 { color: var(--emerald-deep); }
.phero__sub { margin-top: 24px; max-width: 52ch; }
.phero__actions { margin-top: 34px; display:flex; flex-wrap:wrap; gap:14px; align-items:center; }
@media (max-width: 900px){ .phero--split { grid-template-columns: 1fr; } .phero--split .stage { order:-1; max-width:320px; } }

.breadcrumb { display:flex; gap:8px; align-items:center; font-size:.86rem; color: var(--fir-dim); font-weight:500; }
.breadcrumb a { color: var(--fir-dim); transition:color .2s; }
.breadcrumb a:hover { color: var(--emerald-deep); }
.breadcrumb span { color: var(--line); }

/* small stage for subpage 3D */
.stage--sm { max-width: 360px; }

/* ---- Section intro statement (AEO-citable) ---- */
.statement { max-width: 900px; }
.statement p { font-family: var(--display); font-weight:500; font-size: clamp(1.5rem, 2.8vw, 2.3rem); line-height:1.28; letter-spacing:-0.02em; color: var(--fir); }
.statement p strong { color: var(--emerald-deep); font-weight:500; }

/* =========================================================================
   SERVICE ROWS (alternating)
   ========================================================================= */
.svc-row { display:grid; grid-template-columns: 1fr 1fr; gap: clamp(34px, 5vw, 80px); align-items:center; padding-block: clamp(48px, 6vw, 86px); border-top: 1px solid var(--line); }
.svc-row:first-of-type { border-top: none; }
.svc-row:nth-child(even) .svc-row__visual { order: -1; }
.svc-row__num { font-family: var(--display); font-weight:800; font-size: 1rem; color: var(--emerald-deep); letter-spacing:.04em; }
.svc-row h2 { font-size: clamp(1.8rem, 3.2vw, 2.7rem); letter-spacing:-0.03em; margin: 14px 0 0; }
.svc-row__lead { margin-top: 18px; color: var(--fir-soft); font-size: 1.08rem; line-height:1.55; max-width: 46ch; }
.svc-row__feats { list-style:none; display:grid; grid-template-columns:1fr 1fr; gap: 14px 22px; margin: 28px 0 30px; }
.svc-row__feats li { display:flex; gap:11px; align-items:flex-start; font-size:.98rem; color: var(--fir-soft); }
.svc-row__feats li svg { flex:none; margin-top:3px; color: var(--emerald-deep); }
@media (max-width: 620px){ .svc-row__feats { grid-template-columns:1fr; } }

/* service visual panel */
.svc-panel { position: relative; aspect-ratio: 5/4; border-radius: var(--radius-lg); overflow:hidden; border:1px solid var(--line);
  background: radial-gradient(120% 120% at 20% 0%, #eef3ef, #f7f9f6 60%); display:grid; place-items:center; }
.svc-panel__grid { position:absolute; inset:0; background-image: linear-gradient(var(--line-soft) 1px, transparent 1px), linear-gradient(90deg, var(--line-soft) 1px, transparent 1px); background-size: 38px 38px; opacity:.6; mask-image: radial-gradient(70% 70% at 50% 50%, #000, transparent); }
.svc-panel__ico { position:relative; z-index:2; width: clamp(96px, 12vw, 140px); height: clamp(96px,12vw,140px); border-radius: 30px; background:#fff; border:1px solid var(--line); display:grid; place-items:center; color: var(--emerald-deep); box-shadow: 0 30px 60px -34px rgba(23,48,41,.4); transition: transform .6s var(--ease); }
.svc-row:hover .svc-panel__ico { transform: translateY(-6px) rotate(-3deg); }
.svc-panel__chip { position:absolute; z-index:3; background:#fff; border:1px solid var(--line); border-radius:12px; padding:9px 13px; font-size:.8rem; font-weight:600; display:flex; gap:8px; align-items:center; box-shadow: 0 16px 36px -22px rgba(23,48,41,.4); }
.svc-panel__chip svg { color: var(--emerald-deep); }
.svc-panel__chip.t { top: 12%; left: 8%; }
.svc-panel__chip.b { bottom: 12%; right: 8%; }

/* =========================================================================
   FAQ (AEO)
   ========================================================================= */
.faq { max-width: 820px; margin-inline:auto; }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q { width:100%; text-align:left; background:none; border:none; cursor:pointer; font-family: var(--display); font-weight:700; font-size: clamp(1.1rem, 1.8vw, 1.4rem); letter-spacing:-0.015em; color: var(--fir); padding: 26px 48px 26px 0; position: relative; transition: color .2s; }
.faq__q:hover { color: var(--emerald-deep); }
.faq__q::after { content:""; position:absolute; right:6px; top:50%; width:14px; height:14px; transform: translateY(-50%);
  background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M12 5v14M5 12h14' stroke='%23196048' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E"); transition: transform .35s var(--ease); }
.faq__item.open .faq__q::after { transform: translateY(-50%) rotate(135deg); }
.faq__a { overflow:hidden; max-height:0; transition: max-height .4s var(--ease); }
.faq__item.open .faq__a { max-height: 320px; }
.faq__a p { color: var(--fir-soft); font-size: 1.04rem; line-height:1.6; padding: 0 40px 28px 0; }

/* =========================================================================
   FEATURE GRID (generic, for service detail / why-us)
   ========================================================================= */
.fgrid { display:grid; grid-template-columns: repeat(3,1fr); gap: 22px; }
.fcard { background: var(--surface); border:1px solid var(--line); border-radius: var(--radius); padding: clamp(24px,2.6vw,32px); transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.fcard:hover { transform: translateY(-5px); box-shadow: 0 26px 54px -34px rgba(23,48,41,.3); }
.fcard__ic { width:50px; height:50px; border-radius:14px; background: var(--alt); display:grid; place-items:center; color: var(--emerald-deep); margin-bottom: 20px; }
.fcard h3 { font-size: 1.28rem; margin-bottom: 10px; }
.fcard p { color: var(--fir-soft); font-size:.99rem; line-height:1.55; }
@media (max-width: 860px){ .fgrid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .fgrid { grid-template-columns: 1fr; } }

/* ---- CTA band (reusable) ---- */
.ctaband { background: var(--dark-bg); color: var(--dark-text); border-radius: var(--radius-lg); padding: clamp(40px,6vw,80px); text-align:center; position:relative; overflow:hidden; }
.ctaband::before { content:""; position:absolute; width:50vw; height:50vw; max-width:560px; max-height:560px; right:-10vw; bottom:-20vw; background: radial-gradient(circle, rgba(52,167,123,.22), transparent 64%); }
.ctaband h2 { color:#fff; font-size: clamp(2rem,4vw,3.2rem); position:relative; z-index:2; }
.ctaband p { color: var(--dark-dim); max-width: 48ch; margin: 20px auto 0; position:relative; z-index:2; }
.ctaband .hero__actions, .ctaband__actions { justify-content:center; display:flex; gap:14px; flex-wrap:wrap; margin-top: 34px; position:relative; z-index:2; }
.ctaband .btn--ghost { --c-fg:#fff; border-color: rgba(255,255,255,.25); }
.ctaband .btn--ghost:hover { background: rgba(255,255,255,.08); border-color:#fff; }

/* ---- chips/pills row ---- */
.chips { display:flex; flex-wrap:wrap; gap:10px; }
.chip { font-size:.85rem; font-weight:600; color: var(--fir-soft); background: var(--surface); border:1px solid var(--line); padding:8px 15px; border-radius:100px; }

/* =========================================================================
   ARTICLE / LEGAL (prose)
   ========================================================================= */
.prose { max-width: 760px; margin-inline:auto; }
.prose > * + * { margin-top: 22px; }
.prose h2 { font-size: clamp(1.5rem,2.6vw,2rem); margin-top: 48px; }
.prose h3 { font-size: 1.3rem; margin-top: 34px; }
.prose p, .prose li { color: var(--fir-soft); font-size: 1.08rem; line-height: 1.7; }
.prose ul, .prose ol { padding-left: 24px; display:grid; gap:10px; }
.prose a { color: var(--emerald-deep); text-decoration: underline; text-underline-offset: 3px; }
.prose strong { color: var(--fir); }
.prose blockquote { border-left: 3px solid var(--emerald); padding-left: 22px; font-family: var(--display); font-size: 1.3rem; font-weight:500; color: var(--fir); }
.prose hr { border:none; border-top:1px solid var(--line); margin: 40px 0; }
.lead-meta { display:flex; gap:14px; align-items:center; flex-wrap:wrap; color: var(--fir-dim); font-size:.92rem; }
.lead-meta .dot { width:4px;height:4px;border-radius:50%;background:var(--fir-dim); }

/* =========================================================================
   BLOG GRID
   ========================================================================= */
.bgrid { display:grid; grid-template-columns: repeat(3,1fr); gap: 26px; }
.bcard { background: var(--surface); border:1px solid var(--line); border-radius: var(--radius-lg); overflow:hidden; transition: transform .45s var(--ease), box-shadow .45s var(--ease); display:flex; flex-direction:column; }
.bcard:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -36px rgba(23,48,41,.36); }
.bcard__media { aspect-ratio: 16/10; background: radial-gradient(120% 120% at 30% 0%, #eef3ef, #f5f8f4); position:relative; display:grid; place-items:center; color: var(--emerald-deep); border-bottom:1px solid var(--line); }
.bcard__tag { position:absolute; top:14px; left:14px; background:#fff; border:1px solid var(--line); font-size:.74rem; font-weight:600; padding:5px 12px; border-radius:100px; color: var(--fir-soft); }
.bcard__body { padding: 24px 24px 26px; display:flex; flex-direction:column; flex:1; }
.bcard__date { font-size:.82rem; color: var(--fir-dim); font-weight:500; }
.bcard h3 { font-size: 1.32rem; margin: 10px 0 12px; letter-spacing:-0.02em; }
.bcard p { color: var(--fir-soft); font-size:.98rem; line-height:1.55; flex:1; }
.bcard__more { margin-top: 18px; font-weight:600; color: var(--emerald-deep); display:inline-flex; gap:7px; align-items:center; }
@media (max-width: 860px){ .bgrid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .bgrid { grid-template-columns: 1fr; } }
.bcard--feat { grid-column: 1 / -1; }
.bcard--feat { flex-direction: row; }
.bcard--feat .bcard__media { width: 46%; aspect-ratio:auto; border-bottom:none; border-right:1px solid var(--line); }
.bcard--feat .bcard h3 { font-size: clamp(1.5rem,2.4vw,2rem); }
@media (max-width: 720px){ .bcard--feat { flex-direction:column; } .bcard--feat .bcard__media { width:100%; aspect-ratio:16/10; border-right:none; border-bottom:1px solid var(--line); } }

/* =========================================================================
   SHOP
   ========================================================================= */
.shop-grid { display:grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.product { background: var(--surface); border:1px solid var(--line); border-radius: var(--radius-lg); overflow:hidden; transition: transform .4s var(--ease), box-shadow .4s var(--ease); display:flex; flex-direction:column; }
.product:hover { transform: translateY(-5px); box-shadow: 0 26px 56px -34px rgba(23,48,41,.3); }
.product__media { aspect-ratio: 4/3; background: radial-gradient(120% 120% at 30% 0%, #eef3ef, #f5f8f4); display:grid; place-items:center; color: var(--emerald-deep); border-bottom:1px solid var(--line); position:relative; }
.product__badge { position:absolute; top:14px; left:14px; background: var(--emerald); color:#06231a; font-size:.74rem; font-weight:700; padding:5px 12px; border-radius:100px; }
.product__body { padding: 22px 22px 24px; display:flex; flex-direction:column; flex:1; }
.product__cat { font-size:.78rem; font-weight:600; text-transform:uppercase; letter-spacing:.08em; color: var(--emerald-deep); }
.product h3 { font-size: 1.22rem; margin: 8px 0 8px; }
.product p { color: var(--fir-soft); font-size:.94rem; flex:1; }
.product__foot { display:flex; align-items:center; justify-content:space-between; margin-top: 18px; }
.product__price { font-family: var(--display); font-weight:800; font-size: 1.4rem; }
.product__price small { font-weight:500; color: var(--fir-dim); font-size:.8rem; }
@media (max-width: 860px){ .shop-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .shop-grid { grid-template-columns: 1fr; } }

/* product detail */
.pdetail { display:grid; grid-template-columns: 1fr 1fr; gap: clamp(34px,5vw,64px); align-items:start; }
.pdetail__media { aspect-ratio: 1/1; border-radius: var(--radius-lg); background: radial-gradient(120% 120% at 30% 0%, #eef3ef, #f5f8f4); border:1px solid var(--line); display:grid; place-items:center; color: var(--emerald-deep); position: sticky; top: 100px; }
.pdetail h1 { font-size: clamp(1.9rem,3.4vw,2.8rem); letter-spacing:-0.03em; margin: 10px 0 0; }
.pdetail__price { font-family: var(--display); font-weight:800; font-size: 2.2rem; margin: 20px 0; }
.pdetail__price small { font-size:.9rem; font-weight:500; color: var(--fir-dim); }
@media (max-width: 820px){ .pdetail { grid-template-columns: 1fr; } .pdetail__media { position: static; max-width:420px; } }

/* cart */
.cart { display:grid; grid-template-columns: 1.6fr .9fr; gap: clamp(28px,4vw,48px); align-items:start; }
.cart__items { display:grid; gap: 14px; }
.cart__row { display:grid; grid-template-columns: 64px 1fr auto auto; gap:16px; align-items:center; background: var(--surface); border:1px solid var(--line); border-radius: var(--radius); padding: 16px; }
.cart__thumb { width:64px; height:64px; border-radius:12px; background: var(--alt); display:grid; place-items:center; color: var(--emerald-deep); }
.cart__qty { display:flex; align-items:center; gap:10px; border:1px solid var(--line); border-radius:100px; padding:6px 10px; }
.cart__qty button { width:24px;height:24px;border:none;background:var(--alt);border-radius:50%;cursor:pointer;font-size:16px;color:var(--fir); display:grid;place-items:center; }
.cart__summary { background: var(--surface); border:1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(24px,3vw,32px); position: sticky; top: 100px; }
.cart__summary h3 { font-size:1.3rem; margin-bottom:18px; }
.cart__line { display:flex; justify-content:space-between; padding: 11px 0; color: var(--fir-soft); border-bottom:1px solid var(--line-soft); }
.cart__line.total { font-family:var(--display); font-weight:800; font-size:1.3rem; color:var(--fir); border-bottom:none; padding-top:18px; }
.cart__line.total span:last-child { color: var(--emerald-deep); }
@media (max-width: 820px){ .cart { grid-template-columns: 1fr; } .cart__summary { position:static; } }

/* shop disabled note */
.shop-note { display:flex; gap:12px; align-items:center; background: var(--alt); border:1px dashed var(--line); border-radius: var(--radius); padding: 14px 18px; font-size:.92rem; color: var(--fir-soft); margin-bottom: 30px; }
.shop-note svg { color: var(--emerald-deep); flex:none; }

/* page active nav state */
.nav a.active { color: var(--fir); background: rgba(23,48,41,.06); }