/* ==================================================================
   Page-level sections (solution, about, contact, blog, legal)
   ================================================================== */
.center { text-align: center; }
.spacer { height: var(--space-6); }
.fine-print { margin-top: var(--space-5); text-align: center; font-size: var(--fs-sm); color: var(--text-3); }
.section--lav { background: linear-gradient(160deg, #f5f7ff 0%, #f7f3ff 60%, #fdf4f7 100%); }
.theme-commerce .feature-card .icon-tile { background: var(--violet-soft); color: var(--violet); }
.theme-commerce .feature-card:hover .icon-tile { background: var(--violet); color: #fff; }
.theme-commerce .checklist .ic { color: var(--violet); }
.theme-commerce .section--dark .checklist .ic { color: var(--cyan); }

/* ---------- Tabs ---------- */
.tabs__list { display: flex; justify-content: center; gap: 6px; padding: 6px; margin: 0 auto var(--space-6); width: max-content; max-width: 100%; overflow-x: auto; border-radius: 16px; background: var(--bg-soft); border: 1px solid var(--border); }
.tabs__list [role='tab'] { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 12px; font-weight: 600; font-size: 0.9375rem; color: var(--text-2); white-space: nowrap; transition: background var(--t-fast), color var(--t-fast), box-shadow var(--t-fast); }
.tabs__list [role='tab'] .ic { width: 18px; height: 18px; }
.tabs__list [role='tab']:hover { color: var(--text); }
.tabs__list [role='tab'][aria-selected='true'] { background: #fff; color: var(--red); box-shadow: var(--shadow-sm); }
.no-js .tabs__list { display: none; }
.no-js .tabs__panel + .tabs__panel { margin-top: var(--space-7); }
.tabs__grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: clamp(1.5rem, 1rem + 3vw, 4rem); align-items: center; }
.tabs__screen { padding: clamp(1rem, 0.5rem + 2vw, 2.5rem); border-radius: var(--r-xl); background: radial-gradient(70% 80% at 100% 0%, rgba(73, 213, 245, 0.18), transparent 60%), var(--navy); }
.theme-commerce .tabs__screen { background: linear-gradient(135deg, #eaf1ff, #efeaff 55%, #fbe9ef); }
.tabs__copy h3 { font-size: var(--fs-h3); margin-bottom: var(--space-3); }
.tabs__copy p { color: var(--text-2); margin-bottom: var(--space-4); }
.tabs--ready .tabs__panel:not([hidden]) { animation: fadeUp 0.45s var(--ease-out); }

/* ---------- Attribution flow ---------- */
.attr-flow { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--space-3); counter-reset: a; }
.attr-flow__node { position: relative; padding: var(--space-5) var(--space-4); border-radius: var(--r-lg); background: #fff; border: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px; }
.attr-flow__node:not(:last-child)::after { content: ''; position: absolute; right: -12px; top: 42px; width: 12px; height: 2px; background: var(--red); z-index: 1; }
.attr-flow__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--navy); color: #fff; }
.attr-flow__node:last-child .attr-flow__icon { background: var(--red); }
.attr-flow__icon .ic { width: 21px; height: 21px; }
.attr-flow__step { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); margin-top: 4px; }
.attr-flow__node h3 { font-size: 1rem; }
.attr-flow__node p { font-size: 0.8125rem; color: var(--text-2); line-height: 1.5; }
.attr-flow__tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: auto; padding-top: 6px; }
.attr-flow__tags code { font-size: 0.6875rem; padding: 2px 6px; border-radius: 6px; background: var(--cyan-soft); color: #0b6a86; }

/* ---------- Industry band ---------- */
.ind-band { display: grid; grid-template-columns: 0.6fr 1.4fr; gap: var(--space-6); align-items: center; }
.ind-band p { color: var(--text-2); margin-top: 6px; }
.ind-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.ind-chips a { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 99px; background: #fff; border: 1px solid var(--border); font-weight: 500; font-size: 0.9375rem; transition: border-color var(--t-fast), color var(--t-fast), transform var(--t-fast); }
.ind-chips a .ic { width: 18px; height: 18px; color: var(--red); }
.ind-chips a:hover { border-color: var(--red); color: var(--red); transform: translateY(-2px); }

/* ---------- Mini UI cards (payments / renewals) ---------- */
.frame--center { display: grid; place-items: center; padding-block: clamp(2rem, 1rem + 4vw, 4rem); }
.mini-ui { width: min(100%, 420px); padding: var(--space-5); border-radius: var(--r-lg); background: #fff; box-shadow: var(--shadow-lg); border: 1px solid var(--border); font-size: 0.875rem; }
.mini-ui__head { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-weight: 600; margin-bottom: var(--space-4); }
.mini-ui__head > span:first-child { display: inline-flex; align-items: center; gap: 8px; }
.mini-ui__head .ic { width: 18px; height: 18px; color: var(--violet); }
.mini-ui .pay, .mini-ui .stage { font-size: 0.75rem; padding: 3px 10px; }
.mini-ui__amount { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.mini-ui__amount small { width: 100%; color: var(--text-3); }
.mini-ui__amount b { font-family: var(--font-head); font-size: 2rem; letter-spacing: -0.02em; }
.mini-ui__amount span { color: var(--text-3); }
.mini-ui__bar { height: 8px; border-radius: 99px; background: var(--bg-tint); margin: var(--space-3) 0 var(--space-5); overflow: hidden; }
.mini-ui__bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--violet), var(--cyan)); }
.mini-ui__timeline { list-style: none; display: grid; gap: 14px; }
.mini-ui__timeline li { display: flex; gap: 12px; align-items: flex-start; color: var(--text-3); }
.mini-ui__timeline li .ic { width: 20px; height: 20px; margin-top: 2px; }
.mini-ui__timeline li.is-done { color: var(--text); }
.mini-ui__timeline li.is-done .ic { color: var(--green); }
.mini-ui__timeline b { display: block; font-weight: 600; }
.mini-ui__timeline small { color: var(--text-3); }
.renew-list { list-style: none; display: grid; gap: 10px; }
.renew-list li { display: grid; grid-template-columns: 48px 1fr auto; gap: 12px; align-items: center; padding: 10px; border-radius: 12px; background: var(--bg-soft); }
.renew-list__date { display: grid; place-items: center; height: 48px; border-radius: 10px; background: #fff; border: 1px solid var(--border); font-size: 0.6875rem; color: var(--text-3); line-height: 1.1; text-transform: uppercase; }
.renew-list__date b { font-family: var(--font-head); font-size: 1.125rem; color: var(--text); }
.renew-list small { display: block; color: var(--text-3); }
.duo { position: relative; padding-right: 14%; }
.duo__phone { position: absolute; right: 0; bottom: -6%; width: 26%; }

/* ---------- About ---------- */
.about-art { margin: 0; position: relative; padding: 8% 10%; }
.about-art__card { position: relative; display: grid; justify-items: start; gap: 10px; padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); border-radius: var(--r-xl); background: linear-gradient(160deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.03)); border: 1px solid rgba(255, 255, 255, 0.14); backdrop-filter: blur(6px); box-shadow: var(--shadow-xl); }
.about-art__mark { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 20px; background: #fff; }
.about-art__mark .logo__mark { width: 44px; height: 46px; margin: 0; }
.about-art__name { font-family: var(--font-head); font-weight: 800; font-size: clamp(1.75rem, 1.2rem + 2vw, 2.5rem); letter-spacing: -0.03em; margin-top: 8px; }
.about-art__since { display: inline-flex; padding: 5px 12px; border-radius: 99px; background: rgba(73, 213, 245, 0.14); color: var(--cyan); font-size: 0.8125rem; font-weight: 600; }
.about-art__rule { width: 100%; height: 1px; background: rgba(255, 255, 255, 0.12); margin: 10px 0; }
.about-art__list { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; width: 100%; color: var(--on-dark); font-size: 0.9375rem; }
.about-art__list li { display: flex; gap: 10px; align-items: center; }
.about-art__list .ic { width: 20px; height: 20px; color: var(--red-accent); }
.about-art__chip { position: absolute; display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 14px; background: #fff; color: var(--text); font-weight: 600; font-size: 0.875rem; box-shadow: 0 18px 40px -16px rgba(4, 19, 38, 0.6); }
.about-art__chip .ic { width: 18px; height: 18px; color: var(--red); }
.about-art__chip--1 { top: 0; right: 4%; }
.about-art__chip--2 { bottom: 4%; left: 0; }
.about-art__chip--3 { bottom: 14%; right: 0; }
.story { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: start; }
.story__text { margin-top: var(--space-5); display: grid; gap: var(--space-4); color: var(--text-2); font-size: var(--fs-md); }
.story__aside { display: grid; gap: var(--space-4); }
.mv-card { padding: var(--space-6); border-radius: var(--r-lg); border: 1px solid var(--border); background: #fff; }
.mv-card h3 { font-size: var(--fs-h4); margin: var(--space-4) 0 var(--space-2); }
.mv-card p { color: var(--text-2); }
.mv-card--mission { background: linear-gradient(160deg, #fff, var(--red-soft)); border-color: #f7d6db; }
.mv-card--vision { background: linear-gradient(160deg, #fff, var(--cyan-soft)); border-color: #c7eef8; }
.values { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-4); }
.value { position: relative; padding: var(--space-6) var(--space-5); border-radius: var(--r-lg); background: #fff; border: 1px solid var(--border); text-align: center; transition: transform var(--t-med) var(--ease), box-shadow var(--t-med); }
.value:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.value__num { position: absolute; top: 14px; left: 16px; font: 800 0.75rem var(--font-head); color: var(--text-3); letter-spacing: 0.1em; }
.value__icon { display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto var(--space-4); border-radius: 50%; background: var(--red-soft); color: var(--red); }
.value__icon .ic { width: 28px; height: 28px; }
.value h3 { font-size: 1.125rem; margin-bottom: 6px; }
.value p { font-size: 0.9rem; color: var(--text-2); }
.approach-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.approach-card { display: grid; gap: 8px; padding: var(--space-5); border-radius: var(--r-lg); background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); }
.approach-card .ic { width: 28px; height: 28px; color: var(--cyan); }
.approach-card b { color: #fff; font-family: var(--font-head); font-size: 1.0625rem; }
.approach-card span { color: var(--on-dark-2); font-size: 0.9rem; }
.culture { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: center; }
.culture .lead { margin: var(--space-4) 0 var(--space-5); }
.culture__art { position: relative; aspect-ratio: 1; max-width: 440px; width: 100%; margin-inline: auto; border-radius: 50%; background: radial-gradient(closest-side, var(--red-soft), transparent); }
.culture__ring { position: absolute; inset: 14%; border-radius: 50%; border: 1.5px dashed var(--border-strong); }
.culture__core { position: absolute; inset: 34%; display: grid; place-items: center; border-radius: 50%; background: var(--navy); color: #fff; box-shadow: var(--shadow-xl); }
.culture__core .ic { width: 42%; height: 42%; }
.culture__bubble { position: absolute; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 20px; background: #fff; box-shadow: var(--shadow-lg); color: var(--red); }
.culture__bubble .ic { width: 28px; height: 28px; }
.culture__bubble--1 { top: 8%; left: 14%; }
.culture__bubble--2 { top: 16%; right: 6%; color: var(--green); }
.culture__bubble--3 { bottom: 8%; left: 40%; color: var(--cyan-deep); }

/* ---------- Contact ---------- */
.support-art { margin: 0; position: relative; padding: 6% 8% 8%; }
.support-art__card { display: grid; gap: 12px; padding: var(--space-5); border-radius: var(--r-xl); background: #fff; color: var(--text); box-shadow: var(--shadow-xl); max-width: 460px; margin-left: auto; }
.support-art__agent { display: flex; align-items: center; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.support-art__agent b { display: block; font-family: var(--font-head); }
.support-art__agent small { display: flex; align-items: center; gap: 6px; color: var(--text-3); }
.online { width: 8px; height: 8px; border-radius: 50%; background: var(--green); display: inline-block; }
.support-art__avatar { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(135deg, var(--red), #ff5a6e); color: #fff; }
.support-art__avatar .ic { width: 24px; height: 24px; }
.bubble { max-width: 85%; padding: 10px 14px; border-radius: 16px; font-size: 0.875rem; line-height: 1.45; }
.bubble .ic { display: inline; width: 16px; height: 16px; vertical-align: -3px; color: var(--red); }
.bubble--in { background: var(--bg-tint); border-bottom-left-radius: 4px; }
.bubble--out { justify-self: end; background: var(--navy); color: #fff; border-bottom-right-radius: 4px; }
.support-art__input { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; padding: 8px 8px 8px 14px; border-radius: 12px; border: 1px solid var(--border); color: var(--text-3); font-size: 0.875rem; }
.support-art__input i { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--red); color: #fff; }
.support-art__input .ic { width: 16px; height: 16px; }
.support-art__chip { position: absolute; display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 14px; background: #fff; color: var(--text); font-weight: 600; font-size: 0.875rem; box-shadow: 0 18px 40px -16px rgba(4, 19, 38, 0.6); }
.support-art__chip .ic { width: 18px; height: 18px; color: var(--red); }
.support-art__chip--1 { top: 48%; left: 0; }
.support-art__chip--2 { bottom: 4%; left: 8%; }
.support-art__chip--2 .ic { color: var(--green); }

.contact-section { padding-top: clamp(3rem, 2rem + 3vw, 5rem); }
.contact-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(1.5rem, 1rem + 3vw, 4rem); align-items: start; }
.contact-info__intro { color: var(--text-2); margin: 8px 0 var(--space-5); }
.contact-list { display: grid; gap: var(--space-3); }
.contact-list li { display: flex; gap: 16px; align-items: flex-start; padding: var(--space-4); border-radius: var(--r-md); background: var(--bg-soft); border: 1px solid var(--border); }
.contact-list__icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; background: #fff; color: var(--red); border: 1px solid var(--border); flex: none; }
.contact-list__label { display: block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); margin-bottom: 2px; }
.contact-list a { font-weight: 600; font-size: 1.0625rem; }
.contact-list a:hover { color: var(--red); }
.contact-list address { font-style: normal; color: var(--text-2); line-height: 1.55; }
.contact-info__social { margin-top: var(--space-5); }
.social--light a { background: var(--bg-soft); border-color: var(--border); color: var(--navy); }
.map-card { display: flex; align-items: center; gap: var(--space-4); margin-top: var(--space-5); padding: 10px; border-radius: var(--r-md); border: 1px solid var(--border); transition: box-shadow var(--t-med), border-color var(--t-med); }
.map-card:hover { box-shadow: var(--shadow-md); border-color: transparent; }
.map-card__art { position: relative; width: 120px; height: 80px; border-radius: 10px; flex: none; background: linear-gradient(135deg, #e7f1e8, #dfeaf7); overflow: hidden; }
.map-card__art::before { content: ''; position: absolute; inset: 0; background: linear-gradient(30deg, transparent 45%, #fff 46% 52%, transparent 53%), linear-gradient(110deg, transparent 60%, #fff 61% 65%, transparent 66%), linear-gradient(0deg, transparent 30%, rgba(255, 255, 255, 0.8) 31% 34%, transparent 35%); }
.map-card__pin { position: absolute; left: 50%; top: 50%; translate: -50% -60%; color: var(--red); }
.map-card__pin .ic { width: 30px; height: 30px; fill: var(--red-soft); }
.map-card__txt b { display: block; font-family: var(--font-head); }
.map-card__txt span { display: inline-flex; align-items: center; gap: 6px; color: var(--red); font-weight: 600; font-size: 0.875rem; }
.map-card__txt .ic { width: 15px; height: 15px; }

.form-card { padding: clamp(1.5rem, 1rem + 2vw, 2.75rem); border-radius: var(--r-xl); background: #fff; border: 1px solid var(--border); box-shadow: var(--shadow-lg); }
.form-card__intro { color: var(--text-2); margin: 8px 0 var(--space-6); font-size: 0.9375rem; }
.form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4) var(--space-5); }
.field { display: grid; gap: 6px; align-content: start; }
.field--full { grid-column: 1 / -1; }
.field label { font-weight: 600; font-size: 0.875rem; }
.req { color: var(--red); }
.opt { color: var(--text-3); font-weight: 400; font-size: 0.8125rem; }
.field input:not([type='checkbox']), .field select, .field textarea { width: 100%; min-height: 50px; padding: 12px 14px; border-radius: 12px; border: 1.5px solid var(--border-strong); background: #fff; font-size: 1rem; transition: border-color var(--t-fast), box-shadow var(--t-fast); appearance: none; -webkit-appearance: none; }
.field textarea { resize: vertical; min-height: 140px; line-height: 1.5; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: #b6c2d1; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: none; border-color: var(--navy-600); box-shadow: 0 0 0 4px rgba(18, 53, 95, 0.12); border-radius: 12px; }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: var(--red); background: #fffafa; }
.field.has-error input:focus-visible, .field.has-error textarea:focus-visible, .field.has-error select:focus-visible { box-shadow: 0 0 0 4px rgba(213, 9, 36, 0.12); }
.field__hint { font-size: 0.8125rem; color: var(--text-3); }
.field__error { font-size: 0.8125rem; color: var(--red); font-weight: 500; min-height: 0; }
.field__error:empty { display: none; }
.select { position: relative; }
.select .ic { position: absolute; right: 14px; top: 50%; translate: 0 -50%; width: 18px; height: 18px; pointer-events: none; color: var(--text-3); }
.select select { padding-right: 40px; cursor: pointer; }
.field--check { grid-template-columns: auto 1fr; column-gap: 12px; margin-top: var(--space-5); align-items: start; }
.field--check input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--red); cursor: pointer; }
.field--check label { font-weight: 400; color: var(--text-2); font-size: 0.875rem; line-height: 1.5; }
.field--check label a { color: var(--red); text-decoration: underline; }
.field--check .field__error { grid-column: 2; }
.hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); margin-top: var(--space-6); }
.form__secure { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8125rem; color: var(--text-3); }
.form__secure .ic { width: 15px; height: 15px; }
.btn.is-loading .ic { display: none; }
.btn.is-loading::after { content: ''; width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.4); border-top-color: #fff; animation: spinner 0.7s linear infinite; }
.form-status { margin-top: var(--space-5); padding: 14px 16px; border-radius: 12px; font-size: 0.9375rem; line-height: 1.55; }
.form-status:focus { outline: none; }
.form-status a { text-decoration: underline; font-weight: 600; }
.form-status--success { background: var(--green-soft); color: #05603a; border: 1px solid #a6e9c7; }
.form-status--error { background: var(--red-soft); color: #9b0619; border: 1px solid #f6b7c0; }
.form-status--info { background: #eef4ff; color: #1e3a8a; border: 1px solid #c7d7fe; }
.consult-band { display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-5); align-items: center; padding: var(--space-6); border-radius: var(--r-lg); background: linear-gradient(120deg, #f2f6fb, #f6f3ff); border: 1px solid var(--border); }
.consult-band__icon { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 16px; background: #fff; color: var(--red); box-shadow: var(--shadow-sm); }
.consult-band__icon .ic { width: 28px; height: 28px; }
.consult-band p { color: var(--text-2); margin-top: 4px; }

/* ---------- Mobile CRM screen ---------- */
.mcrm { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 3.4cqw; padding: 15cqw 6cqw 0; font-size: 3.8cqw; background: #f5f8fc; color: var(--text); }
.mcrm__top span { display: block; color: var(--text-3); }
.mcrm__top b { font-family: var(--font-head); font-size: 6.4cqw; }
.mcrm__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 3cqw; }
.mcrm__stats span { padding: 4cqw; border-radius: 4cqw; background: var(--navy); color: #fff; }
.mcrm__stats span:last-child { background: var(--red); }
.mcrm__stats b { display: block; font-family: var(--font-head); font-size: 7cqw; }
.mcrm__stats small { font-size: 3.2cqw; }
.mcrm__h { font-weight: 700; margin-top: 1cqw; }
.mlead { display: grid; grid-template-columns: 8cqw 1fr auto; gap: 3cqw; align-items: center; padding: 3.4cqw; border-radius: 3.4cqw; background: #fff; border: 1px solid var(--border); }
.mlead .dot { width: 8cqw; height: 8cqw; }
.mlead b { display: block; font-size: 3.6cqw; }
.mlead small { color: var(--text-3); font-size: 3cqw; }
.mlead .src { font-size: 2.8cqw; padding: 1cqw 2.4cqw; }
.mcrm__fab { position: absolute; right: 6cqw; bottom: 22cqw; display: grid; place-items: center; width: 13cqw; height: 13cqw; border-radius: 50%; background: var(--red); color: #fff; box-shadow: 0 3cqw 6cqw -2cqw rgba(213, 9, 36, 0.6); }
.mcrm__fab .ic { width: 6cqw; height: 6cqw; }
.mcrm .shop__tabs { margin-top: auto; }
.phones { position: relative; display: flex; justify-content: center; align-items: flex-end; gap: 6%; padding: 4% 6%; }
.phones .phone { width: 38%; }
.phones .phone:first-child { transform: translateY(-6%) rotate(-4deg); }
.phones .phone:last-child { transform: rotate(4deg); }
.rank-card { position: absolute; z-index: 3; padding: 14px 16px; border-radius: 14px; background: #fff; color: var(--text); box-shadow: 0 18px 40px -16px rgba(4, 19, 38, 0.5); font-size: 0.8125rem; width: 230px; }
.rank-card__q { display: flex; gap: 8px; align-items: center; padding: 8px 10px; border-radius: 99px; background: var(--bg-tint); color: var(--text-2); margin-bottom: 10px; }
.rank-card__q .ic { width: 15px; height: 15px; }
.rank-card__r { display: grid; gap: 4px; }
.rank-card__r i { display: block; height: 7px; border-radius: 99px; background: #e4e9f0; }
.rank-card__r i:first-child { background: linear-gradient(90deg, var(--green), #6ce9a6); width: 80%; }
.rank-card__r i:nth-child(2) { width: 95%; }
.rank-card__r i:nth-child(3) { width: 65%; }

/* ---------- Service template ---------- */
.svc-visual { margin: 0; }
.problem { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: center; }
.problem__quote { position: relative; padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); border-radius: var(--r-xl); background: var(--navy); color: #fff; font-family: var(--font-head); font-weight: 700; font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem); line-height: 1.35; letter-spacing: -0.02em; }
.problem__quote .ic { width: 40px; height: 40px; color: var(--red-accent); margin-bottom: var(--space-4); }
.problem__quote span { color: var(--cyan); }
.problem .lead + .lead { margin-top: var(--space-4); }
.deliverables { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
.deliverable { display: flex; gap: var(--space-4); padding: var(--space-5); border-radius: var(--r-lg); background: #fff; border: 1px solid var(--border); transition: box-shadow var(--t-med), transform var(--t-med) var(--ease); }
.deliverable:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); }
.deliverable h3 { font-size: 1.0625rem; margin-bottom: 4px; }
.deliverable p { color: var(--text-2); font-size: 0.9375rem; }
.benefit-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
.benefit { padding: var(--space-5); border-left: 3px solid var(--red); background: #fff; border-radius: 0 var(--r-md) var(--r-md) 0; }
.benefit h3 { font-size: 1.0625rem; margin-bottom: 6px; }
.benefit p { color: var(--text-2); font-size: 0.9rem; }
.section--dark .benefit { background: rgba(255, 255, 255, 0.05); }

/* ---------- Solutions overview ---------- */
.sol-overview { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.sol-col { padding: var(--space-6); border-radius: var(--r-lg); background: #fff; border: 1px solid var(--border); }
.sol-col__head { display: flex; align-items: center; gap: 12px; margin-bottom: var(--space-5); }
.sol-col__head h3 { font-size: var(--fs-h4); }
.sol-col ul { display: grid; gap: 4px; }
.sol-col a { display: flex; gap: 12px; padding: 12px; margin-inline: -12px; border-radius: 12px; transition: background var(--t-fast); }
.sol-col a:hover { background: var(--bg-soft); }
.sol-col a:hover b { color: var(--red); }
.sol-col a .ic { width: 20px; height: 20px; color: var(--red); margin-top: 2px; }
.sol-col b { display: block; font-weight: 600; }
.sol-col small { display: block; color: var(--text-3); font-size: 0.875rem; }

/* ---------- Industries page ---------- */
.ind-detail { display: grid; gap: var(--space-5); }
.ind-row { display: grid; grid-template-columns: 0.9fr 1.1fr 1.1fr; gap: var(--space-5); padding: var(--space-6); border-radius: var(--r-lg); background: #fff; border: 1px solid var(--border); scroll-margin-top: calc(var(--header-h) + 24px); }
.ind-row__head { display: grid; gap: 12px; align-content: start; }
.ind-row__head h2 { font-size: var(--fs-h3); }
.ind-row__head .industry-card__icon { width: 56px; height: 56px; }
.ind-row h3 { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); margin-bottom: 10px; font-family: var(--font-body); }
.ind-row__solution h3 { color: var(--red); }
.ind-row p, .ind-row li { color: var(--text-2); font-size: 0.9375rem; }
.ind-row .chips { margin-top: var(--space-4); }

/* ---------- Process page ---------- */
.phase-list { display: grid; gap: 0; counter-reset: ph; position: relative; }
.phase { display: grid; grid-template-columns: 120px 1fr 1fr; gap: var(--space-6); padding: var(--space-7) 0; border-top: 1px solid var(--border); }
.phase:last-child { border-bottom: 1px solid var(--border); }
.phase__num { font-family: var(--font-head); font-weight: 800; font-size: clamp(2.5rem, 2rem + 2vw, 4rem); line-height: 1; color: transparent; -webkit-text-stroke: 1.5px var(--red); letter-spacing: -0.04em; }
.phase__head { display: grid; gap: 10px; align-content: start; }
.phase__head h2 { font-size: var(--fs-h3); }
.phase__head p { color: var(--text-2); }
.phase__meta { display: grid; gap: var(--space-4); }
.phase__box { padding: var(--space-5); border-radius: var(--r-md); background: var(--bg-soft); }
.phase__box h3 { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); margin-bottom: 10px; font-family: var(--font-body); }

/* ---------- Blog ---------- */
.blog-tools { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-4); margin-bottom: var(--space-6); }
.filters { display: flex; flex-wrap: wrap; gap: 8px; }
.filters button { padding: 9px 16px; border-radius: 99px; border: 1px solid var(--border-strong); font-weight: 500; font-size: 0.875rem; color: var(--text-2); background: #fff; transition: all var(--t-fast); }
.filters button:hover { border-color: var(--navy); color: var(--navy); }
.filters button[aria-pressed='true'] { background: var(--navy); border-color: var(--navy); color: #fff; }
.search { position: relative; width: min(100%, 320px); }
.search input { width: 100%; min-height: 46px; padding: 10px 14px 10px 42px; border-radius: 12px; border: 1.5px solid var(--border-strong); font-size: 0.9375rem; }
.search input:focus-visible { outline: none; border-color: var(--navy-600); box-shadow: 0 0 0 4px rgba(18, 53, 95, 0.12); }
.search .ic { position: absolute; left: 14px; top: 50%; translate: 0 -50%; width: 18px; height: 18px; color: var(--text-3); }
.featured-post { display: grid; grid-template-columns: 1.1fr 1fr; border-radius: var(--r-xl); overflow: hidden; background: #fff; border: 1px solid var(--border); margin-bottom: var(--space-7); transition: box-shadow var(--t-med); }
.featured-post:hover { box-shadow: var(--shadow-lg); }
.featured-post__media { position: relative; min-height: 300px; padding: 8%; display: grid; place-items: center; background: radial-gradient(70% 80% at 100% 0%, rgba(73, 213, 245, 0.25), transparent 60%), var(--navy); }
.featured-post__body { padding: clamp(1.5rem, 1rem + 2vw, 3rem); display: flex; flex-direction: column; gap: var(--space-4); justify-content: center; }
.featured-post__body h2 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2.125rem); }
.featured-post__body p { color: var(--text-2); }
.post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; font-size: 0.8125rem; color: var(--text-3); }
.post-meta span { display: inline-flex; align-items: center; gap: 6px; }
.post-meta .ic { width: 15px; height: 15px; }
.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.post-card { display: flex; flex-direction: column; border-radius: var(--r-lg); overflow: hidden; background: #fff; border: 1px solid var(--border); transition: transform var(--t-med) var(--ease), box-shadow var(--t-med); }
.post-card[hidden] { display: none; }
.post-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.post-card__media { display: grid; place-items: center; aspect-ratio: 16 / 9; }
.post-card__media .ic { width: 56px; height: 56px; stroke-width: 1.4; }
.post-card__media--a { background: linear-gradient(135deg, var(--navy), #1b4a86); color: var(--cyan); }
.post-card__media--b { background: linear-gradient(135deg, #fde8eb, #fff4f5); color: var(--red); }
.post-card__media--c { background: linear-gradient(135deg, #efedff, #f6f3ff); color: var(--violet); }
.post-card__media--d { background: linear-gradient(135deg, #e3f8fd, #f2fbfe); color: #0b7ea0; }
.post-card__body { padding: var(--space-5); display: flex; flex-direction: column; gap: 10px; flex: 1; }
.post-card__body h3 { font-size: 1.1875rem; line-height: 1.3; }
.post-card__body p { color: var(--text-2); font-size: 0.9375rem; flex: 1; }
.post-card__soon { color: var(--text-3); font-size: 0.875rem; font-weight: 600; display: inline-flex; gap: 6px; align-items: center; }
.post-card__soon .ic { width: 16px; height: 16px; }
.post-card a.stretched::after { content: ''; position: absolute; inset: 0; }
.post-card { position: relative; }
.empty { padding: var(--space-7); text-align: center; color: var(--text-2); border: 1px dashed var(--border-strong); border-radius: var(--r-lg); }
.empty[hidden] { display: none; }
.newsletter { display: grid; grid-template-columns: 1fr auto; gap: var(--space-5); align-items: center; padding: var(--space-6); border-radius: var(--r-lg); background: var(--bg-soft); border: 1px solid var(--border); margin-top: var(--space-7); }

/* Article */
.article-hero { padding-bottom: clamp(2.5rem, 2rem + 2vw, 4rem); }
.article-hero .page-hero__title { font-size: clamp(2rem, 1.5rem + 2.2vw, 3.25rem); max-width: 900px; }
.article-hero .post-meta { margin-top: var(--space-5); color: var(--on-dark-2); font-size: 0.875rem; }
.article-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: start; }
.toc { position: sticky; top: calc(var(--header-h) + 32px); padding: var(--space-5); border-radius: var(--r-lg); background: var(--bg-soft); border: 1px solid var(--border); font-size: 0.9rem; }
.toc p { font-weight: 700; font-family: var(--font-head); margin-bottom: 10px; }
.toc ol { display: grid; gap: 8px; padding-left: 18px; color: var(--text-2); }
.toc a:hover { color: var(--red); }
.toc__cta { margin-top: var(--space-5); padding-top: var(--space-5); border-top: 1px solid var(--border); display: grid; gap: 10px; }
.prose { min-width: 0; overflow-wrap: break-word; font-size: 1.0625rem; line-height: 1.8; color: #2b3443; max-width: 760px; }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { font-size: clamp(1.5rem, 1.3rem + 0.8vw, 1.875rem); margin-top: 2.2em; color: var(--text); scroll-margin-top: calc(var(--header-h) + 24px); }
.prose h3 { font-size: 1.25rem; margin-top: 1.8em; color: var(--text); }
.prose ul, .prose ol { padding-left: 1.4em; }
.prose li + li { margin-top: 0.4em; }
.prose li::marker { color: var(--red); }
.prose a { color: var(--red); text-decoration: underline; text-underline-offset: 3px; }
.prose strong { color: var(--text); }
.prose blockquote { margin: 1.6em 0; padding: 1.2em 1.4em; border-left: 4px solid var(--red); background: var(--bg-soft); border-radius: 0 12px 12px 0; font-family: var(--font-head); font-size: 1.1875rem; font-weight: 600; color: var(--text); line-height: 1.5; }
.prose table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; line-height: 1.5; }
.prose th, .prose td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: top; }
.prose th { background: var(--bg-soft); font-weight: 600; color: var(--text); }
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 12px; }
.prose .callout { padding: 1em 1.2em; border-radius: 12px; background: var(--cyan-soft); border: 1px solid #b9ecf8; font-size: 1rem; }
.author-box { display: flex; gap: var(--space-4); align-items: center; margin-top: var(--space-7); padding: var(--space-5); border-radius: var(--r-lg); background: var(--bg-soft); border: 1px solid var(--border); }
.author-box__mark { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: var(--navy); flex: none; }
.author-box__mark .logo__mark { width: 30px; height: 32px; margin: 0; color: var(--red-accent); }
.author-box p { color: var(--text-2); font-size: 0.9375rem; }

/* Legal */
.legal-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: start; }
.legal-layout .toc { top: calc(var(--header-h) + 24px); }
.legal-note { margin-bottom: var(--space-6); }

/* 404 */
.notfound { min-height: 70vh; display: grid; place-items: center; text-align: center; padding-block: var(--section-y); }
.notfound__code { font-family: var(--font-head); font-weight: 800; font-size: clamp(6rem, 4rem + 10vw, 11rem); line-height: 1; letter-spacing: -0.06em; background: linear-gradient(135deg, var(--navy), var(--red)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.notfound p { color: var(--text-2); max-width: 520px; margin: var(--space-4) auto var(--space-6); }
.notfound .btn-row { justify-content: center; }
.notfound__links { margin-top: var(--space-7); display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: center; font-weight: 500; }
.notfound__links a { color: var(--text-2); }
.notfound__links a:hover { color: var(--red); }

/* ---------- Page responsive ---------- */
@media (max-width: 1280px) {
  .attr-flow { grid-template-columns: repeat(3, 1fr); }
  .attr-flow__node:nth-child(3)::after { display: none; }
}
@media (max-width: 1100px) { .values { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 1100px) {
  .tabs__grid, .story, .culture, .contact-grid, .problem, .ind-band, .featured-post, .article-layout, .legal-layout { grid-template-columns: minmax(0, 1fr); }
  .toc { position: static; }
  .article-layout .toc { order: -1; }
  .sol-overview, .post-grid { grid-template-columns: repeat(2, 1fr); }
  .benefit-row { grid-template-columns: repeat(2, 1fr); }
  .ind-row { grid-template-columns: 1fr 1fr; }
  .ind-row__head { grid-column: 1 / -1; grid-template-columns: auto 1fr; align-items: center; }
  .ind-row__head p { grid-column: 1 / -1; }
  .phase { grid-template-columns: 80px 1fr; }
  .phase__meta { grid-column: 2; }
  .support-art__card { margin-inline: auto; }
}
@media (max-width: 760px) {
  .attr-flow { grid-template-columns: 1fr 1fr; }
  .attr-flow__node::after { display: none; }
  .values { grid-template-columns: 1fr 1fr; }
  .approach-grid, .form__grid, .deliverables, .sol-overview, .post-grid, .benefit-row, .ind-row { grid-template-columns: 1fr; }
  .consult-band, .newsletter { grid-template-columns: 1fr; }
  .phase { grid-template-columns: 1fr; gap: var(--space-4); padding: var(--space-6) 0; }
  .phase__meta { grid-column: auto; }
  .about-art__list { grid-template-columns: 1fr; }
  .about-art { padding: 8% 2%; }
  .about-art__chip--1 { right: 0; }
  .tabs__list { justify-content: flex-start; width: 100%; }
  .blog-tools { flex-direction: column; align-items: stretch; }
  .search { width: 100%; }
  .duo { padding-right: 10%; }
}
@media (max-width: 480px) {
  .attr-flow, .values { grid-template-columns: 1fr; }
  .support-art { padding: 10% 0 12%; }
  .support-art__chip--1 { top: 0; }
}

.section--dark .step p, .section--dark .journey p, .section--dark .benefit p { color: var(--on-dark-2); }
.section--dark .benefit h3 { color: #fff; }
.hero-art--com .hero-art__f1 { top: 2%; left: 0; }
.hero-art--com .hero-art__f3 { bottom: 4%; left: 6%; }

.hero-chips { margin-top: var(--space-6); }
.hero-chips .ind-chips a { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.16); color: #fff; }
.hero-chips .ind-chips a .ic { color: var(--cyan); }
.hero-chips .ind-chips a:hover { background: #fff; color: var(--navy); }
.checklist--warn .ic { color: #b54708; }
.faq-groups { display: grid; gap: var(--space-7); }
.faq-group { scroll-margin-top: calc(var(--header-h) + 24px); }
.faq-group h2 { display: flex; align-items: center; gap: 12px; margin-bottom: var(--space-5); }
.faq-group h2 .ic { color: var(--red); }
.frame { position: relative; }
.seo-rank { right: -2%; bottom: -8%; }
.mock--flow .flow { max-width: 480px; margin-inline: auto; }
.featured-post__media .mock { width: 100%; }

/* Light-surface variants of mock tags (contrast) */
.app--light .src--meta, .mcrm .src--meta { color: #1849a9; }
.app--light .src--google, .mcrm .src--google { color: #93370d; }
.app--light .src--web, .mcrm .src--web { color: #05603a; }
.app--light .stage--warm { color: #4a3aa8; }
.mcrm__stats small { opacity: 1; }