/* ============================================================
   ОПТИМУС — страница «Технология ISOBLOK»
   hero, intro + разрез стены, сравнение, преимущества
   ============================================================ */

/* ---------- Hero ---------- */
.tc-hero { position: relative; min-height: 72vh; display: flex; align-items: flex-end; overflow: hidden; color: #fff; background: var(--ink-d); }
.tc-hero #water-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; display: block; }
.tc-hero .veil { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(3,11,15,.5) 0%, transparent 32%, transparent 46%, rgba(2,9,12,.88) 100%); }
.tc-hero .wrap { position: relative; z-index: 2; padding-top: clamp(140px,18vh,200px); padding-bottom: clamp(50px,7vw,84px); }
.tc-hero .eyebrow-row { color: var(--aqua-pale); margin-bottom: 22px; }
.tc-hero h1 { color: #fff; font-size: clamp(44px,7.5vw,120px); line-height: .98; }
.tc-hero h1 em { font-style: italic; color: var(--accent); }
.tc-hero .lead { color: rgba(255,255,255,.84); margin-top: 24px; max-width: 56ch; }
.tc-hero .tags { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.tc-hero .tags .t { display: inline-flex; align-items: center; gap: 9px; padding: 11px 18px; border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid var(--line-d); font-size: 14px; font-weight: 600; }
.tc-hero .tags .t svg { width: 18px; height: 18px; color: var(--accent); }

/* ---------- Интро + разрез стены ---------- */
.tc-intro { background: var(--paper); }
.tc-intro .wrap { display: grid; grid-template-columns: 1fr 1.05fr; gap: 64px; align-items: center; }
.tc-intro h2 { font-size: clamp(32px,4.2vw,60px); }
.tc-intro .lead { margin-top: 20px; }
.tc-intro p.body { margin-top: 16px; color: var(--ink-soft); font-size: 16px; line-height: 1.7; }

/* разрез стены: интерактивные слои */
.xsec { position: relative; }
.xsec-title { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-dim); font-weight: 700; margin-bottom: 18px; display: flex; align-items: center; gap: 10px; }
.xsec-title::before { content:""; width: 24px; height: 2px; background: var(--aqua); }
.xsec-stack { display: flex; flex-direction: column; gap: 6px; border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow-card); }
.xlayer { position: relative; display: flex; align-items: center; gap: 16px; padding: 0 22px; min-height: 58px; cursor: default; color: #fff; overflow: hidden; transition: min-height .4s var(--ease); }
.xlayer .xnum { font-family: var(--font-display); font-size: 18px; opacity: .85; flex: none; width: 26px; }
.xlayer .xname { font-weight: 700; font-size: 15px; }
.xlayer .xdesc { margin-left: auto; font-size: 12.5px; opacity: 0; max-width: 0; white-space: nowrap; overflow: hidden; transition: opacity .4s var(--ease), max-width .4s var(--ease); text-align: right; }
.xlayer:hover { min-height: 72px; }
.xlayer:hover .xdesc { opacity: .92; max-width: 240px; }
.xlayer::after { content:""; position:absolute; inset:0; pointer-events:none; }
/* слои сверху вниз */
.xl-finish  { background: linear-gradient(100deg, #1bb5cf, #0e93ab); }
.xl-hydro   { background: linear-gradient(100deg, #0c5663, #083f49); min-height: 44px; }
.xl-concrete{ background: repeating-linear-gradient(90deg, rgba(255,255,255,.04) 0 3px, transparent 3px 22px), linear-gradient(100deg, #6c7a80, #56646a); min-height: 92px; }
.xl-rebar   { background: repeating-linear-gradient(90deg, rgba(255,255,255,.5) 0 2px, transparent 2px 16px), linear-gradient(100deg, #8a979c, #75848a); min-height: 44px; color: #06222b; }
.xl-iso     { background: linear-gradient(100deg, #cfe7ec, #b3d6dd); color: var(--aqua-ink); min-height: 78px; }
.xl-base    { background: linear-gradient(100deg, #c9b89c, #b3a081); color: #3a2f1c; min-height: 46px; }
.xl-soil    { background: linear-gradient(100deg, #8a6f52, #6f573e); min-height: 50px; }
.xsec-note { margin-top: 16px; font-size: 12.5px; color: var(--ink-dim); text-align: center; }

/* ---------- Сравнение ---------- */
.tc-compare { background: var(--mist); }
.cmp-grid { margin-top: 60px; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.cmp-card { border-radius: var(--r-lg); padding: 38px 34px; border: 1px solid var(--hair); }
.cmp-card.win { background: linear-gradient(155deg, var(--deep-2), var(--ink-d)); color: #fff; border-color: transparent; box-shadow: 0 40px 90px -44px rgba(8,42,51,.6); position: relative; overflow: hidden; }
.cmp-card.alt { background: #fff; box-shadow: var(--shadow-soft); }
.cmp-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 24px; }
.cmp-head h3 { font-family: var(--font-body); font-weight: 800; font-size: 22px; letter-spacing: -.01em; line-height: 1.2; }
.cmp-card.win h3 { color: #fff; }
.cmp-badge { font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 7px 13px; border-radius: 999px; }
.cmp-card.win .cmp-badge { background: var(--cta); color: #fff; }
.cmp-card.alt .cmp-badge { background: var(--mist); color: var(--ink-dim); }
.cmp-row { display: flex; align-items: flex-start; gap: 13px; padding: 13px 0; font-size: 14.5px; border-top: 1px solid; }
.cmp-card.win .cmp-row { border-color: rgba(140,230,242,.12); color: rgba(255,255,255,.88); }
.cmp-card.alt .cmp-row { border-color: var(--hair); color: var(--ink-soft); }
.cmp-row:first-of-type { border-top: none; }
.cmp-row .ci { width: 22px; height: 22px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-top: 1px; }
.cmp-row .ci svg { width: 13px; height: 13px; }
.cmp-card.win .cmp-row .ci { background: rgba(22,188,212,.22); color: var(--aqua-2); }
.cmp-card.alt .cmp-row .ci { background: #fde8e0; color: #e0683f; }

/* ---------- Преимущества (плитки с цифрой) ---------- */
.tc-adv { background: var(--paper); }
.tcadv-grid { margin-top: 56px; display: grid; grid-template-columns: repeat(4,1fr); gap: 22px; }
.tcadv-card { background: var(--mist); border: 1px solid var(--hair); border-radius: var(--r-lg); padding: 34px 28px; transition: transform .5s var(--ease), box-shadow .5s, background .4s; }
.tcadv-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-card); background: #fff; }
.tcadv-card .big { font-family: var(--font-display); font-size: 46px; color: var(--aqua-deep); line-height: 1; }
.tcadv-card .big small { font-size: .5em; }
.tcadv-card h4 { font-family: var(--font-body); font-weight: 800; font-size: 18px; margin-top: 16px; }
.tcadv-card p { font-size: 14px; color: var(--ink-soft); margin-top: 9px; line-height: 1.55; }

/* ---------- Этапы возведения чаши ---------- */
.tc-steps { background: var(--mist); }
.tcsteps-grid { margin-top: 56px; display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.tcstep { background: #fff; border: 1px solid var(--hair); border-radius: var(--r-md); padding: 30px 28px; display: flex; gap: 18px; align-items: flex-start; transition: transform .5s var(--ease), box-shadow .5s; }
.tcstep:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); }
.tcstep .sn { font-family: var(--font-display); font-size: 34px; color: rgba(22,188,212,.3); line-height: 1; flex: none; }
.tcstep h4 { font-family: var(--font-body); font-weight: 800; font-size: 16.5px; }
.tcstep p { font-size: 13.5px; color: var(--ink-soft); margin-top: 7px; line-height: 1.5; }

@media (max-width: 1080px) {
  .tc-intro .wrap { grid-template-columns: 1fr; gap: 44px; }
  .tcadv-grid { grid-template-columns: 1fr 1fr; }
  .tcsteps-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .cmp-grid { grid-template-columns: 1fr; }
  .tcadv-grid { grid-template-columns: 1fr 1fr; }
  .tcsteps-grid { grid-template-columns: 1fr; }
  .xlayer .xdesc { display: none; }
}
@media (max-width: 460px) {
  .tcadv-grid { grid-template-columns: 1fr; }
}