/* Бинарность — internal page components */

/* page hero */
.page-hero{ position:relative; overflow:hidden; border-bottom:1px solid var(--line);
  padding:clamp(26px,3.5vw,46px) var(--pad) clamp(40px,5vw,72px);
  background-image:radial-gradient(var(--line) 1px, transparent 1px); background-size:22px 22px; background-position:-1px -1px; }
.crumbs{ display:flex; flex-wrap:wrap; gap:9px; align-items:center; font-family:var(--mono); font-size:11.5px; color:var(--ink-3); margin-bottom:24px; position:relative; z-index:1; }
.crumbs a{ transition:color .15s; }
.crumbs a:hover{ color:var(--accent); }
.crumbs .sep{ opacity:.5; }
.crumbs .cur{ color:var(--ink-2); }
.page-hero h1{ font-family:var(--serif); font-weight:600; font-size:clamp(34px,5vw,64px); letter-spacing:-0.02em; line-height:1.03; color:var(--ink); max-width:18ch; position:relative; z-index:1; text-wrap:balance; }
.page-hero .lead{ font-family:var(--sans); margin-top:22px; max-width:62ch; font-size:clamp(15px,1.7vw,19px); color:var(--ink-2); line-height:1.6; position:relative; z-index:1; text-wrap:pretty; }
.page-hero .hero-cmd{ margin-top:34px; }

/* generic section */
.section{ padding:clamp(44px,5.5vw,80px) var(--pad); border-bottom:1px solid var(--line); }
.section.alt{ background:linear-gradient(180deg, var(--accent-soft), transparent 85%); }
.section-head{ max-width:62ch; margin-bottom:clamp(30px,4vw,48px); }
.section-head .kick{ margin-bottom:14px; }
.section-head h2{ font-family:var(--serif); font-weight:600; font-size:clamp(26px,3.6vw,44px); letter-spacing:-0.02em; line-height:1.05; color:var(--ink); text-wrap:balance; }
.section-head p{ font-family:var(--sans); margin-top:16px; font-size:clamp(15px,1.6vw,18px); color:var(--ink-2); line-height:1.6; }

/* service detail block */
.svc-block{ display:grid; grid-template-columns:1.05fr 0.95fr; gap:clamp(28px,4.5vw,64px); align-items:start;
  padding:clamp(40px,5.5vw,80px) var(--pad); border-bottom:1px solid var(--line); }
/* блок внутри .section: паддинги секции уже отработали, свои обнуляем — иначе они складываются */
.svc-block.flush{ padding:0; border-bottom:none; }
.svc-block .svc-txt{ min-width:0; }
.svc-head{ display:flex; align-items:baseline; gap:16px; }
.svc-num{ font-family:var(--serif); font-size:clamp(34px,5vw,64px); font-weight:600; line-height:0.8; letter-spacing:-0.03em; color:transparent; -webkit-text-stroke:1.2px var(--accent); opacity:.7; }
.svc-block h2{ font-family:var(--serif); font-weight:600; font-size:clamp(24px,3.2vw,40px); letter-spacing:-0.02em; line-height:1.05; color:var(--ink); }
.svc-block .svc-lead{ font-family:var(--sans); margin-top:18px; font-size:clamp(15px,1.6vw,18px); color:var(--ink-2); line-height:1.6; max-width:46ch; }
.svc-list{ margin-top:24px; list-style:none; display:grid; gap:0; }
.svc-list li{ display:flex; align-items:flex-start; gap:13px; padding:13px 0; border-top:1px solid var(--line); font-family:var(--sans); font-size:14.5px; color:var(--ink-2); line-height:1.5; }
.svc-list li:last-child{ border-bottom:1px solid var(--line); }
.svc-list li svg{ flex:none; color:var(--accent); margin-top:2px; }
.svc-list li b{ color:var(--ink); font-weight:600; }
.svc-tags{ margin-top:22px; display:flex; flex-wrap:wrap; gap:8px; }
.svc-tags span{ font-family:var(--mono); font-size:11px; color:var(--ink-2); border:1px solid var(--line-2); border-radius:999px; padding:6px 13px; }
/* service visual panel */
.svc-visual{ background:var(--screen); border:1px solid var(--screen-2); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow); min-width:0; }
.svc-visual .vbar{ display:flex; align-items:center; gap:7px; padding:11px 15px; border-bottom:1px solid oklch(1 0 0 / .08); background:oklch(1 0 0 / .03); }
.svc-visual .vbar i{ width:10px; height:10px; border-radius:50%; display:block; }
.svc-visual .vbar i:nth-child(1){ background:oklch(0.68 0.18 25); }
.svc-visual .vbar i:nth-child(2){ background:oklch(0.80 0.15 85); }
.svc-visual .vbar i:nth-child(3){ background:oklch(0.74 0.17 150); }
.svc-visual .vbar .vt{ margin-left:6px; font-family:var(--mono); font-size:10.5px; color:oklch(0.62 0.02 264); letter-spacing:0.06em; }
.svc-visual .vbody{ padding:clamp(20px,2.4vw,28px); font-family:var(--mono); font-size:12.5px; line-height:1.9; color:oklch(0.7 0.02 264); }
.svc-visual .vbody .c-key{ color:oklch(0.74 0.15 250); }
.svc-visual .vbody .c-str{ color:oklch(0.78 0.16 150); }
.svc-visual .vbody .c-fn{ color:oklch(0.82 0.14 85); }
.svc-visual .vbody .c-mut{ color:oklch(0.5 0.02 264); }
@media(max-width:840px){ .svc-block{ grid-template-columns:1fr; } .svc-block.flip .svc-visual{ order:-1; } .svc-block .svc-visual{ order:2; } }

/* feature cards */
.fgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.fgrid.two{ grid-template-columns:repeat(2,1fr); }
.fgrid.four{ grid-template-columns:repeat(4,1fr); }
.fcard{ border:1px solid var(--line); border-radius:var(--r-lg); padding:28px; background:var(--panel); box-shadow:var(--shadow-sm); transition:transform .22s cubic-bezier(.2,.7,.2,1), box-shadow .22s, border-color .22s; }
.fcard:hover{ transform:translateY(-4px); box-shadow:var(--shadow); border-color:color-mix(in oklch, var(--accent) 50%, var(--line)); }
.fcard .fico{ width:46px; height:46px; border-radius:12px; display:grid; place-items:center; background:var(--accent-soft); color:var(--accent-ink); margin-bottom:20px; }
.fcard h3{ font-family:var(--sans); font-weight:700; font-size:18px; letter-spacing:-0.01em; color:var(--ink); }
.fcard p{ font-family:var(--sans); margin-top:10px; font-size:14px; color:var(--ink-2); line-height:1.6; }
.fcard .fnum{ font-family:var(--mono); font-size:11px; color:var(--ink-3); margin-bottom:14px; }
@media(max-width:860px){ .fgrid, .fgrid.four{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:540px){ .fgrid, .fgrid.two, .fgrid.four{ grid-template-columns:1fr; } }

/* process timeline */
.timeline{ display:grid; gap:0; }
.tl-row{ display:grid; grid-template-columns:auto 1fr; gap:24px; padding:0 0 8px; }
.tl-rail{ display:flex; flex-direction:column; align-items:center; }
.tl-dot{ width:34px; height:34px; border-radius:50%; background:var(--accent); color:#fff; font-family:var(--mono); font-size:13px; display:grid; place-items:center; flex:none; box-shadow:var(--shadow-accent); }
.tl-line{ width:1px; flex:1; background:var(--line); margin:6px 0; min-height:24px; }
.tl-row:last-child .tl-line{ display:none; }
.tl-body{ padding-bottom:34px; }
.tl-body h4{ font-family:var(--sans); font-weight:700; font-size:18px; color:var(--ink); }
.tl-body .tl-when{ font-family:var(--mono); font-size:11px; color:var(--accent); letter-spacing:0.06em; margin-bottom:6px; }
.tl-body p{ font-family:var(--sans); margin-top:8px; font-size:14.5px; color:var(--ink-2); line-height:1.6; max-width:60ch; }

/* values list */
.values{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; }
.values .val{ background:var(--panel); padding:30px; }
.values .val .vk{ font-family:var(--serif); font-size:30px; font-weight:600; color:var(--accent); }
.values .val h4{ font-family:var(--sans); font-weight:700; font-size:18px; margin-top:14px; color:var(--ink); }
.values .val p{ font-family:var(--sans); margin-top:9px; font-size:14px; color:var(--ink-2); line-height:1.6; }
@media(max-width:760px){ .values{ grid-template-columns:1fr; } }

/* team */
.team-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.member{ border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; background:var(--panel); transition:transform .2s, box-shadow .2s; }
.member:hover{ transform:translateY(-3px); box-shadow:var(--shadow); }
.member .ava{ aspect-ratio:1; background:linear-gradient(135deg, var(--accent-soft), var(--panel)); display:grid; place-items:center; border-bottom:1px solid var(--line); }
.member .ava span{ font-family:var(--serif); font-size:34px; font-weight:600; color:var(--accent); }
.member .mi{ padding:18px; }
.member .mi h4{ font-family:var(--sans); font-weight:700; font-size:15.5px; color:var(--ink); }
.member .mi p{ font-family:var(--mono); font-size:11.5px; color:var(--ink-3); margin-top:6px; letter-spacing:0.04em; }
@media(max-width:860px){ .team-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:460px){ .team-grid{ grid-template-columns:1fr; } }

/* faq */
.faq{ display:grid; gap:0; max-width:900px; }
.faq details{ border-top:1px solid var(--line); }
.faq details:last-child{ border-bottom:1px solid var(--line); }
.faq summary{ list-style:none; cursor:pointer; padding:22px 0; display:flex; align-items:center; justify-content:space-between; gap:20px;
  font-family:var(--sans); font-weight:600; font-size:clamp(15px,1.8vw,19px); color:var(--ink); }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary .pm{ flex:none; width:26px; height:26px; border:1px solid var(--line-2); border-radius:8px; display:grid; place-items:center; color:var(--accent); position:relative; transition:.2s; }
.faq summary .pm::before, .faq summary .pm::after{ content:""; position:absolute; background:currentColor; border-radius:2px; }
.faq summary .pm::before{ width:11px; height:2px; }
.faq summary .pm::after{ width:2px; height:11px; transition:transform .2s; }
.faq details[open] summary .pm{ background:var(--accent); color:#fff; border-color:var(--accent); }
.faq details[open] summary .pm::after{ transform:scaleY(0); }
.faq .ans{ padding:0 0 24px; font-family:var(--sans); font-size:15px; color:var(--ink-2); line-height:1.65; max-width:72ch; }

/* contact methods */
.cmethods{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.cmethod{ border:1px solid var(--line); border-radius:var(--r-lg); padding:26px; background:var(--panel); box-shadow:var(--shadow-sm); }
.cmethod .cico{ width:44px; height:44px; border-radius:12px; background:var(--accent-soft); color:var(--accent-ink); display:grid; place-items:center; margin-bottom:18px; }
.cmethod h4{ font-family:var(--mono); font-size:11px; letter-spacing:0.12em; text-transform:uppercase; color:var(--ink-3); }
.cmethod a, .cmethod .big{ font-family:var(--sans); font-weight:700; font-size:19px; color:var(--ink); margin-top:8px; display:block; transition:color .15s; }
.cmethod a:hover{ color:var(--accent); }
.cmethod p{ font-family:var(--sans); font-size:13px; color:var(--ink-2); margin-top:8px; line-height:1.55; }
@media(max-width:820px){ .cmethods{ grid-template-columns:1fr; } }

/* contact split (form + requisites) */
.contact-split{ display:grid; grid-template-columns:1.1fr 0.9fr; gap:clamp(28px,4vw,56px); align-items:start; }
.req{ border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; background:var(--panel); }
.req .req-row{ display:flex; justify-content:space-between; gap:16px; padding:15px 20px; border-bottom:1px solid var(--line); font-size:13.5px; }
.req .req-row:last-child{ border-bottom:none; }
.req .req-row .rk{ font-family:var(--mono); font-size:11.5px; color:var(--ink-3); letter-spacing:0.04em; }
.req .req-row .rv{ font-family:var(--sans); color:var(--ink); font-weight:500; text-align:right; opacity:1; transform:none; }
.req .req-row .rv{ word-break:break-word; }
.req-bank{ margin-top:16px; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--panel); overflow:hidden; }
.req-bank > summary{ list-style:none; cursor:pointer; padding:15px 20px; font-family:var(--mono); font-size:11.5px;
  letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-2); display:flex; align-items:center; justify-content:space-between; gap:12px; }
.req-bank > summary::-webkit-details-marker{ display:none; }
.req-bank > summary::after{ content:"+"; font-size:15px; color:var(--accent); line-height:1; }
.req-bank[open] > summary::after{ content:"−"; }
.req-bank > summary:hover{ color:var(--ink); }
.req-bank .req{ border:none; border-top:1px solid var(--line); border-radius:0; }

.map{ margin-top:16px; border:1px solid var(--line); border-radius:var(--r-lg); aspect-ratio:16/9; overflow:hidden; position:relative;
  background:
    repeating-linear-gradient(0deg, var(--line) 0 1px, transparent 1px 38px),
    repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px 38px),
    var(--bg); }
.map .pin{ position:absolute; left:50%; top:48%; transform:translate(-50%,-100%); display:flex; flex-direction:column; align-items:center; gap:6px; }
.map .pin .dot{ width:16px; height:16px; border-radius:50% 50% 50% 0; background:var(--accent); transform:rotate(-45deg); box-shadow:var(--shadow-accent); }
.map .pin .lbl{ font-family:var(--mono); font-size:11px; color:var(--ink); background:var(--panel); border:1px solid var(--line); border-radius:6px; padding:5px 10px; transform:translateY(4px); white-space:nowrap; }
@media(max-width:820px){ .contact-split{ grid-template-columns:1fr; } }

/* light form card (for contact page on light bg) */
.form-card.light{ background:var(--panel); border:1px solid var(--line); box-shadow:var(--shadow); }
.form-card.light h3{ color:var(--ink); }
.form-card.light .fcsub{ color:var(--ink-2); }
.form-card.light label{ color:var(--ink-3); }
.form-card.light input, .form-card.light textarea, .form-card.light select{ background:var(--bg); border:1px solid var(--line); color:var(--ink); }
.form-card.light input::placeholder, .form-card.light textarea::placeholder{ color:var(--ink-3); }
.form-card.light input:focus, .form-card.light textarea:focus, .form-card.light select:focus{ border-color:var(--accent); background:var(--panel); }
.form-card.light .note{ color:var(--ink-3); }

/* mini cta band (reuse cta look, standalone) */
.cta-band{ background:var(--screen); color:oklch(0.92 0.012 264); padding:clamp(44px,5.5vw,80px) var(--pad);
  background-image:radial-gradient(oklch(1 0 0 / .05) 1px, transparent 1px); background-size:22px 22px; text-align:center; }
.cta-band h2{ font-family:var(--serif); font-weight:600; font-size:clamp(28px,4vw,48px); letter-spacing:-0.02em; line-height:1.05; color:#fff; max-width:20ch; margin:0 auto; }
.cta-band p{ font-family:var(--sans); margin:18px auto 0; max-width:54ch; font-size:16px; line-height:1.6; color:oklch(0.78 0.015 264); }
.cta-band .row{ margin-top:32px; display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.cta-band .cmd.line{ background:transparent; color:#fff; border-color:oklch(1 0 0 / .22); box-shadow:none; }
.cta-band .cmd.line:hover{ border-color:#fff; color:#fff; background:oklch(1 0 0 / .06); }

/* ===== прайс: сравнительная таблица тарифов ===== */
.ptable-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--panel); }
.ptable{ width:100%; min-width:760px; border-collapse:collapse; font-family:var(--sans); font-size:14px; }
.ptable th, .ptable td{ padding:14px 18px; text-align:center; border-bottom:1px solid var(--line); vertical-align:middle; }
.ptable tbody th, .ptable thead th:first-child{ text-align:left; font-weight:500; color:var(--ink-2);
  font-family:var(--mono); font-size:11.5px; letter-spacing:0.04em; white-space:nowrap;
  position:sticky; left:0; background:var(--panel); z-index:1; border-right:1px solid var(--line); }
.ptable thead th{ font-family:var(--sans); font-weight:700; font-size:17px; color:var(--ink); letter-spacing:-0.01em;
  border-bottom:1px solid var(--line-2); padding-top:22px; }
.ptable thead th .pk{ display:block; font-family:var(--mono); font-size:10px; letter-spacing:0.12em;
  text-transform:uppercase; color:var(--ink-3); font-weight:500; margin-bottom:6px; }
.ptable .col-hl{ background:var(--accent-soft); }
.ptable thead .col-hl{ box-shadow:inset 0 3px 0 var(--accent); }
.ptable .p-price{ font-family:var(--sans); font-weight:700; font-size:clamp(22px,2.4vw,28px); letter-spacing:-0.02em; color:var(--ink); white-space:nowrap; }
.ptable .p-price small{ display:block; font-family:var(--mono); font-size:10.5px; font-weight:400; color:var(--ink-3); letter-spacing:0.06em; margin-top:4px; }
.ptable td{ color:var(--ink); }
.ptable .p-mut{ color:var(--ink-3); font-family:var(--mono); font-size:12.5px; }
.ptable tbody tr:last-child th, .ptable tbody tr:last-child td{ border-bottom:none; }
.ptable .p-cta a{ display:inline-flex; align-items:center; gap:8px; font-family:var(--sans); font-weight:600; font-size:13.5px;
  padding:11px 20px; border:1px solid var(--line-2); border-radius:var(--r); transition:.16s; white-space:nowrap; }
.ptable .p-cta a:hover{ border-color:var(--accent); color:var(--accent); }
.ptable .col-hl .p-cta a{ background:var(--accent); color:#fff; border-color:var(--accent); box-shadow:var(--shadow-accent); }
.ptable .col-hl .p-cta a:hover{ background:var(--accent-d); color:#fff; }
.ptable-note{ margin-top:14px; font-family:var(--mono); font-size:11.5px; color:var(--ink-3); line-height:1.6; }
.scroll-hint{ display:none; margin-top:10px; font-family:var(--mono); font-size:11px; color:var(--ink-3); }
@media(max-width:820px){
  .scroll-hint{ display:block; }
  /* на узком экране закреплённая колонка не должна съедать половину ширины */
  .ptable{ min-width:660px; }
  .ptable th, .ptable td{ padding:12px 13px; }
  .ptable tbody th, .ptable thead th:first-child{ white-space:normal; max-width:150px; font-size:11px; line-height:1.4; }
}

/* ===== прайс: карточки конфигураций ===== */
.hw-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.hw{ border:1px solid var(--line); border-radius:var(--r-lg); padding:26px 24px; background:var(--panel); box-shadow:var(--shadow-sm);
  display:flex; flex-direction:column; transition:transform .22s cubic-bezier(.2,.7,.2,1), box-shadow .22s, border-color .22s; }
.hw:hover{ transform:translateY(-4px); box-shadow:var(--shadow); border-color:color-mix(in oklch, var(--accent) 50%, var(--line)); }
.hw.hl{ border-color:var(--accent); background:linear-gradient(180deg, var(--accent-soft), var(--panel) 55%); }
.hw .hw-k{ font-family:var(--mono); font-size:10.5px; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-3); }
.hw h3{ font-family:var(--sans); font-weight:700; font-size:26px; letter-spacing:-0.02em; color:var(--ink); margin-top:6px; }
.hw .hw-price{ margin-top:16px; display:flex; align-items:baseline; gap:7px; }
.hw .hw-price b{ font-family:var(--sans); font-weight:700; font-size:clamp(26px,3vw,34px); letter-spacing:-0.03em; color:var(--ink); }
.hw .hw-price span{ font-family:var(--mono); font-size:12px; color:var(--ink-3); }
.hw ul{ margin-top:20px; list-style:none; display:grid; gap:0; }
.hw ul li{ display:flex; justify-content:space-between; gap:12px; padding:10px 0; border-top:1px solid var(--line);
  font-family:var(--mono); font-size:12.5px; color:var(--ink-3); }
.hw ul li b{ font-family:var(--sans); font-size:13.5px; font-weight:600; color:var(--ink); }
.hw .hw-foot{ margin-top:auto; padding-top:20px; font-family:var(--mono); font-size:11px; color:var(--ink-3); line-height:1.6; }
@media(max-width:1000px){ .hw-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:540px){ .hw-grid{ grid-template-columns:1fr; } }

/* ===== прайс: расчёт пакета ===== */
.bundle{ display:grid; grid-template-columns:1.05fr 0.95fr; gap:clamp(28px,4vw,56px); align-items:start; }
.calc{ border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; background:var(--panel); box-shadow:var(--shadow-sm); }
.calc .calc-h{ padding:16px 22px; border-bottom:1px solid var(--line); font-family:var(--mono); font-size:11px;
  letter-spacing:0.12em; text-transform:uppercase; color:var(--ink-3); background:var(--bg); }
.calc .row{ display:flex; align-items:baseline; justify-content:space-between; gap:14px; padding:16px 22px; border-bottom:1px solid var(--line); }
.calc .row .rl{ font-family:var(--sans); font-size:14.5px; color:var(--ink); }
.calc .row .rl i{ display:block; font-family:var(--mono); font-style:normal; font-size:11px; color:var(--ink-3); margin-top:4px; }
.calc .row .rr{ font-family:var(--sans); font-size:15px; font-weight:600; color:var(--ink); white-space:nowrap; }
.calc .row .was{ font-weight:400; color:var(--ink-3); text-decoration:line-through; margin-right:8px; }
.calc .row .off{ font-family:var(--mono); font-size:11px; color:var(--accent); }
.calc .row.total{ background:var(--accent-soft); border-bottom:none; padding-top:20px; padding-bottom:20px; }
.calc .row.total .rl{ font-weight:700; }
.calc .row.total .rr{ font-family:var(--sans); font-weight:700; font-size:clamp(22px,2.4vw,28px); letter-spacing:-0.02em; color:var(--accent-ink); }

/* ===== список «что не входит» ===== */
.excl{ display:grid; grid-template-columns:repeat(2,1fr); gap:0 clamp(24px,4vw,48px); }
.excl li{ display:flex; align-items:flex-start; gap:12px; padding:13px 0; border-top:1px solid var(--line);
  font-family:var(--sans); font-size:14.5px; color:var(--ink-2); line-height:1.5; }
.excl li::before{ content:"×"; flex:none; width:20px; height:20px; border-radius:50%; display:grid; place-items:center;
  background:var(--line); color:var(--ink-3); font-size:12px; margin-top:1px; }
@media(max-width:760px){ .excl{ grid-template-columns:1fr; } .bundle{ grid-template-columns:1fr; } }

/* prose / generic rich text */
.prose{ max-width:70ch; }
.prose p{ font-family:var(--sans); font-size:16px; line-height:1.7; color:var(--ink-2); margin-bottom:18px; }
.prose p b, .prose strong{ color:var(--ink); }

/* tariff page intro reuse handled by portal.css .tariff/.plan */


/* ===== cases / portfolio ===== */
.case-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
/* нечётный «хвост» разворачиваем на всю ширину, чтобы не оставалась пустая ячейка */
.case-grid > .case-card:last-child:nth-child(odd){ grid-column:1 / -1; display:grid; grid-template-columns:0.9fr 1.1fr; }
.case-grid > .case-card:last-child:nth-child(odd) .case-cover{ aspect-ratio:auto; min-height:220px; border-bottom:none; border-right:1px solid var(--screen-2); }
.case-card{ border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; background:var(--panel); box-shadow:var(--shadow-sm); transition:transform .22s cubic-bezier(.2,.7,.2,1), box-shadow .22s, border-color .22s; display:flex; flex-direction:column; }
.case-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow); border-color:color-mix(in oklch, var(--accent) 50%, var(--line)); }
.case-cover{ aspect-ratio:16/8; background:var(--screen); position:relative; overflow:hidden; border-bottom:1px solid var(--screen-2);
  background-image:radial-gradient(oklch(1 0 0 / .06) 1px, transparent 1px); background-size:18px 18px; display:grid; place-items:center; }
.case-cover .cv-mark{ font-family:var(--serif); font-size:clamp(22px,2.6vw,32px); font-weight:600; color:#fff; opacity:.92;
  padding:0 clamp(20px,4vw,44px); text-align:center; text-wrap:balance; line-height:1.15; }
.case-cover .cv-tag{ position:absolute; top:14px; left:14px; font-family:var(--mono); font-size:10.5px; letter-spacing:0.1em; text-transform:uppercase; color:oklch(0.82 0.02 264); background:oklch(1 0 0 / .08); border:1px solid oklch(1 0 0 / .16); border-radius:999px; padding:5px 11px; }
.case-body{ padding:24px 26px 26px; display:flex; flex-direction:column; flex:1; }
.case-body .c-kind{ font-family:var(--mono); font-size:11px; color:var(--accent); letter-spacing:0.06em; }
.case-body h3{ font-family:var(--serif); font-weight:600; font-size:clamp(20px,2.3vw,26px); letter-spacing:-0.01em; color:var(--ink); margin-top:10px; line-height:1.2; }
.case-body p{ font-family:var(--sans); font-size:14.5px; color:var(--ink-2); line-height:1.6; margin-top:14px; flex:1; }
.case-metrics{ display:flex; gap:24px; margin-top:22px; padding-top:20px; border-top:1px solid var(--line); }
.case-metrics .m .mv{ font-family:var(--sans); font-weight:700; font-size:22px; letter-spacing:-0.02em; color:var(--accent); }
.case-metrics .m .mk{ font-family:var(--mono); font-size:10px; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-3); margin-top:3px; }
.case-body .c-more{ margin-top:22px; display:inline-flex; align-items:center; gap:9px; font-family:var(--mono); font-size:12.5px; color:var(--accent); }
.case-card:hover .c-more{ gap:13px; }
@media(max-width:760px){
  .case-grid{ grid-template-columns:1fr; }
  .case-grid > .case-card:last-child:nth-child(odd){ display:flex; grid-template-columns:none; }
  .case-grid > .case-card:last-child:nth-child(odd) .case-cover{ aspect-ratio:16/8; min-height:0; border-bottom:1px solid var(--screen-2); border-right:none; }
}

/* case detail */
.case-facts{ display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.case-facts .f{ padding:24px var(--pad); border-right:1px solid var(--line); }
.case-facts .f:last-child{ border-right:none; }
.case-facts .f .fk{ font-family:var(--mono); font-size:10.5px; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-3); }
.case-facts .f .fv{ font-family:var(--sans); font-weight:600; font-size:16px; color:var(--ink); margin-top:8px; }
@media(max-width:700px){ .case-facts{ grid-template-columns:1fr 1fr; } .case-facts .f:nth-child(2){ border-right:none; } }
.case-prose{ max-width:74ch; }
.case-prose h2{ font-family:var(--serif); font-weight:600; font-size:clamp(22px,2.8vw,32px); letter-spacing:-0.01em; color:var(--ink); margin:0 0 16px; }
.case-prose h2:not(:first-child){ margin-top:40px; }
.case-prose p{ font-family:var(--sans); font-size:16px; line-height:1.7; color:var(--ink-2); margin-bottom:16px; }
.case-prose p b{ color:var(--ink); }
.case-prose ul{ list-style:none; display:grid; gap:0; margin:6px 0 16px; }
.case-prose ul li{ display:flex; gap:12px; padding:11px 0; border-top:1px solid var(--line); font-family:var(--sans); font-size:15px; color:var(--ink-2); }
.case-prose ul li:last-child{ border-bottom:1px solid var(--line); }
.case-prose ul li::before{ content:"—"; color:var(--accent); }

/* ===== blog ===== */
.post-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.post-card{ border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; background:var(--panel); box-shadow:var(--shadow-sm); transition:transform .22s cubic-bezier(.2,.7,.2,1), box-shadow .22s, border-color .22s; display:flex; flex-direction:column; }
.post-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow); border-color:color-mix(in oklch, var(--accent) 50%, var(--line)); }
.post-cover{ aspect-ratio:16/8; background:linear-gradient(135deg, var(--accent-soft), var(--panel)); border-bottom:1px solid var(--line); display:grid; place-items:center; }
.post-cover svg{ color:var(--accent); opacity:.85; }
.post-body{ padding:22px 24px 24px; display:flex; flex-direction:column; flex:1; }
.post-meta{ display:flex; gap:12px; font-family:var(--mono); font-size:11px; color:var(--ink-3); letter-spacing:0.04em; }
.post-meta .cat{ color:var(--accent); }
.post-body h3{ font-family:var(--sans); font-weight:700; font-size:18px; letter-spacing:-0.01em; color:var(--ink); margin-top:12px; line-height:1.25; }
.post-body p{ font-family:var(--sans); font-size:14px; color:var(--ink-2); line-height:1.6; margin-top:10px; flex:1; }
.post-body .c-more{ margin-top:18px; font-family:var(--mono); font-size:12px; color:var(--accent); }
@media(max-width:860px){ .post-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:540px){ .post-grid{ grid-template-columns:1fr; } }