/* Бинарность — 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; }
.page-hero .wm{ position:absolute; right:-3%; bottom:-34%; width:min(34%,360px); opacity:.05; pointer-events:none; }
.page-hero .wm svg{ width:100%; height:auto; display:block; }
.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:center;
  padding:clamp(40px,5.5vw,80px) var(--pad); border-bottom:1px solid var(--line); }
.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; }
.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); }

/* 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-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(30px,4vw,46px); font-weight:600; color:#fff; opacity:.92; }
.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 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; } }