/* =========================================================================
   Mining-heat landing — "Отопление дома майнинг-фермой"
   Theme: immersion cooling. Warm amber dielectric fluid glowing inside a
   cold petroleum-slate tank / Ural winter. Brand yellow kept for actions.
   Loaded AFTER style.css so it overrides base rules. All classes prefixed
   m- so nothing collides with the reused modal-form / button components.
   ========================================================================= */

:root{
  --ink:            #0d1618;   /* cold petroleum near-black (tank/winter)   */
  --ink-2:          #122023;   /* raised dark panel                          */
  --ink-3:          #17282c;   /* card                                       */
  --line-dark:      rgba(255,255,255,.10);
  --fluid:          #ffb43d;   /* dielectric amber                           */
  --fluid-hi:       #ffd15c;   /* amber highlight                            */
  --fluid-deep:     #ff9e12;   /* amber deep                                 */
  --coolant:        #45d4cb;   /* telemetry teal (the "data / crypto" side)  */
  --coolant-deep:   #1f9d95;
  --paper:          #f4f1ea;   /* warm off-white light section               */
  --paper-2:        #ece7dc;
  --ink-on-paper:   #14201f;
  --muted-paper:    #5b6a68;
  --text:           #e8e3d8;   /* body text on dark                          */
  --text-soft:      rgba(232,227,216,.66);
  --mono: ui-monospace,"SF Mono","Cascadia Mono","Consolas","Liberation Mono",monospace;
  --disp: 'Conv_MuseoSansCyrl-900','Conv_MuseoSansCyrl-500',"Segoe UI",Arial,sans-serif;
  --sans: 'Conv_MuseoSansCyrl-500',"Segoe UI",Arial,sans-serif;
  --sans-7: 'Conv_MuseoSansCyrl-700','Conv_MuseoSansCyrl-500',"Segoe UI",Arial,sans-serif;
}

/* ---- reset the base layout constraints from style.css ---- */
html{ -webkit-text-size-adjust:100%; }
body{
  min-width:0;
  margin:0;
  background:var(--ink);
  color:var(--text);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
.l-main{ min-width:0; }           /* neutralise base min-width if ever used */
img{ max-width:100%; display:block; }
.m-page *{ box-sizing:border-box; }

.m-wrap{ width:100%; max-width:1180px; margin:0 auto; padding:0 28px; }

/* section rhythm */
.m-sec{ padding:96px 0; position:relative; }
.m-sec--dark{ background:var(--ink); }
.m-sec--panel{ background:var(--ink-2); }
.m-sec--paper{ background:var(--paper); color:var(--ink-on-paper); }

.m-eyebrow{
  font-family:var(--mono);
  font-size:12.5px;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--fluid);
  margin:0 0 18px;
  display:flex; align-items:center; gap:12px;
}
.m-eyebrow::before{ content:""; width:34px; height:1px; background:var(--fluid); opacity:.7; }
.m-sec--paper .m-eyebrow{ color:var(--fluid-deep); }

.m-h2{
  font-family:var(--disp);
  font-weight:400;
  font-size:clamp(28px,4.4vw,50px);
  line-height:1.06;
  letter-spacing:-.01em;
  text-transform:uppercase;
  margin:0 0 20px;
}
.m-lede{ font-size:clamp(16px,1.5vw,19px); max-width:60ch; color:var(--text-soft); margin:0; }
.m-sec--paper .m-lede{ color:var(--muted-paper); }

/* ============================ TOP BAR ============================ */
.m-topbar{
  position:absolute; inset:0 0 auto 0; z-index:6;
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 28px;
  max-width:1180px; margin:0 auto;
}
.m-topbar .b-logo{ filter:brightness(0) invert(1); opacity:.95; }
.m-top-r{ display:flex; align-items:center; gap:26px; }
.m-top-phone{
  font-family:var(--sans-7); font-size:22px; color:#fff; letter-spacing:.01em;
  white-space:nowrap; transition:color .3s ease;
}
.m-top-phone:hover{ color:var(--fluid-hi); }
.m-top-call{
  font-family:var(--mono); font-size:12.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--fluid); border-bottom:1px dashed rgba(255,180,61,.5); padding-bottom:2px;
  cursor:pointer; white-space:nowrap;
}
.m-top-call:hover{ color:var(--fluid-hi); border-color:var(--fluid-hi); }

/* ============================ HERO ============================ */
.m-hero{
  position:relative; overflow:hidden;
  background:
    radial-gradient(120% 90% at 82% 18%, rgba(255,158,18,.16), transparent 55%),
    radial-gradient(90% 70% at 10% 100%, rgba(69,212,203,.08), transparent 60%),
    linear-gradient(180deg,#0c1416 0%,#0f1b1e 55%,#0d1618 100%);
}
.m-hero-grid{
  display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center;
  padding:150px 0 96px;
}
.m-hero h1{
  font-family:var(--disp); font-weight:400;
  font-size:clamp(34px,5.6vw,68px); line-height:.98; letter-spacing:-.015em;
  text-transform:uppercase; margin:0 0 22px;
}
.m-hero h1 .m-accent{
  color:var(--fluid);
  text-shadow:0 0 34px rgba(255,180,61,.35);
}
.m-hero-sub{ font-size:clamp(16px,1.7vw,20px); color:var(--text-soft); max-width:46ch; margin:0 0 34px; }
.m-hero-sub b{ color:var(--text); font-family:var(--sans-7); font-weight:400; }

/* stat chips = telemetry readout */
.m-chips{ display:flex; flex-wrap:wrap; gap:12px; margin:0 0 38px; }
.m-chip{
  border:1px solid var(--line-dark); background:rgba(255,255,255,.02);
  border-radius:10px; padding:12px 16px; min-width:132px;
}
.m-chip .n{ font-family:var(--mono); font-size:23px; color:var(--fluid-hi); line-height:1; }
.m-chip .l{ font-size:12.5px; color:var(--text-soft); margin-top:6px; line-height:1.25; }
.m-chip--teal .n{ color:var(--coolant); }

.m-cta-row{ display:flex; align-items:center; gap:22px; flex-wrap:wrap; }

/* primary action button (own styling, keeps i-show_form hook for modal) */
.m-cta{
  display:inline-flex; align-items:center; gap:12px; cursor:pointer;
  font-family:var(--sans-7); font-size:16px; letter-spacing:.02em;
  color:#241a05; text-decoration:none; text-transform:uppercase;
  background:linear-gradient(135deg,#ffdb5c 0%,#ffad0e 100%);
  border:1px solid #ffdd66; border-radius:8px;
  padding:17px 30px;
  box-shadow:0 3px 0 #9f7200, 0 14px 34px -14px rgba(255,173,14,.7);
  transition:transform .12s ease, box-shadow .2s ease, filter .2s ease;
}
.m-cta:hover{ filter:brightness(1.04); box-shadow:0 3px 0 #9f7200,0 18px 40px -14px rgba(255,173,14,.85); }
.m-cta:active{ transform:translateY(2px); box-shadow:0 1px 0 #9f7200; }
.m-cta .arw{ font-family:var(--mono); }
.m-cta:focus-visible{ outline:3px solid var(--coolant); outline-offset:3px; }

.m-cta--ghost{
  background:transparent; color:var(--text); border:1px solid var(--line-dark);
  box-shadow:none; text-transform:none; font-family:var(--sans);
}
.m-cta--ghost:hover{ border-color:var(--fluid); color:var(--fluid-hi); filter:none; }
.m-note{ font-family:var(--mono); font-size:12px; color:var(--text-soft); letter-spacing:.04em; }

/* ---- hero signature: immersion-tank schematic (SVG lives inline) ---- */
.m-tank{ position:relative; }
.m-tank svg{ width:100%; height:auto; overflow:visible; }
@keyframes m-bub{ 0%{ transform:translateY(0); opacity:0 } 12%{opacity:.9} 100%{ transform:translateY(-150px); opacity:0 } }
.m-bub{ animation:m-bub linear infinite; transform-origin:center; }
@keyframes m-pulse{ 0%,100%{ opacity:.35 } 50%{ opacity:1 } }
.m-flow{ stroke-dasharray:6 9; animation:m-dash 1.6s linear infinite; }
@keyframes m-dash{ to{ stroke-dashoffset:-30 } }
.m-glow{ animation:m-pulse 3.4s ease-in-out infinite; }

/* ============================ HOW IT WORKS ============================ */
.m-steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--paper-2); margin-top:56px; border:1px solid var(--paper-2); border-radius:14px; overflow:hidden; }
.m-step{ background:var(--paper); padding:30px 26px 34px; position:relative; }
.m-step .num{ font-family:var(--mono); font-size:13px; color:var(--fluid-deep); letter-spacing:.1em; }
.m-step h3{ font-family:var(--sans-7); font-weight:400; font-size:19px; margin:14px 0 10px; color:var(--ink-on-paper); line-height:1.15; }
.m-step p{ margin:0; font-size:14.5px; color:var(--muted-paper); line-height:1.5; }
.m-step .ic{ font-family:var(--mono); font-size:11px; color:var(--coolant-deep); position:absolute; right:22px; top:30px; }
.m-kpd{
  margin-top:40px; border-left:3px solid var(--fluid-deep);
  background:rgba(255,158,18,.08); padding:18px 22px; border-radius:0 10px 10px 0;
  font-size:15px; color:var(--muted-paper); max-width:78ch;
}
.m-kpd b{ color:var(--ink-on-paper); font-family:var(--sans-7); font-weight:400; }

/* ============================ ADVANTAGES ============================ */
.m-adv{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:52px; }
.m-card{
  background:var(--ink-3); border:1px solid var(--line-dark); border-radius:14px;
  padding:26px 22px 24px; transition:border-color .25s ease, transform .25s ease;
}
.m-card:hover{ border-color:rgba(255,180,61,.45); transform:translateY(-3px); }
.m-card .k{ font-family:var(--mono); font-size:22px; color:var(--fluid-hi); line-height:1; }
.m-card h3{ font-family:var(--sans-7); font-weight:400; font-size:17px; margin:16px 0 8px; color:#fff; }
.m-card p{ margin:0; font-size:14px; color:var(--text-soft); line-height:1.5; }

/* ============================ COMPARISON ============================ */
.m-cmp{ margin-top:48px; border:1px solid var(--line-dark); border-radius:14px; overflow:hidden; }
.m-cmp-row{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.5fr; align-items:center; }
.m-cmp-row + .m-cmp-row{ border-top:1px solid var(--line-dark); }
.m-cmp-row > div{ padding:18px 22px; font-size:15px; }
.m-cmp-head > div{ font-family:var(--mono); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-soft); background:rgba(255,255,255,.02); }
.m-cmp-name{ font-family:var(--sans-7); font-weight:400; color:#fff; }
.m-cmp-num{ font-family:var(--mono); color:var(--text); }
.m-cmp-row--hi{ background:linear-gradient(90deg,rgba(255,180,61,.10),rgba(255,158,18,.03)); }
.m-cmp-row--hi .m-cmp-name{ color:var(--fluid-hi); }
.m-yes{ color:var(--coolant); }
.m-no{ color:var(--text-soft); }
.m-cmp-foot{ font-family:var(--mono); font-size:12px; color:var(--text-soft); margin-top:14px; letter-spacing:.02em; }

/* ============================ WHO IT'S FOR ============================ */
.m-who{ display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:52px; }
.m-who-card{ background:var(--paper); border-radius:16px; padding:34px 32px; border:1px solid var(--paper-2); }
.m-who-card .tag{ font-family:var(--mono); font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--fluid-deep); }
.m-who-card h3{ font-family:var(--disp); font-weight:400; font-size:26px; text-transform:uppercase; margin:12px 0 12px; color:var(--ink-on-paper); }
.m-who-card p{ margin:0 0 14px; color:var(--muted-paper); font-size:15px; }
.m-who-card .ex{ font-size:14px; color:var(--ink-on-paper); background:var(--paper-2); border-radius:10px; padding:14px 16px; }
.m-who-card .ex b{ font-family:var(--mono); font-weight:400; color:var(--fluid-deep); }

/* ============================ PROCESS ============================ */
.m-proc{ margin-top:52px; display:grid; grid-template-columns:repeat(3,1fr); gap:1px 24px; }
.m-proc-item{ padding:24px 0; border-top:1px solid var(--line-dark); position:relative; }
.m-proc-item .n{ font-family:var(--mono); font-size:13px; color:var(--fluid); letter-spacing:.06em; }
.m-proc-item h3{ font-family:var(--sans-7); font-weight:400; font-size:19px; color:#fff; margin:10px 0 8px; }
.m-proc-item p{ margin:0; font-size:14.5px; color:var(--text-soft); line-height:1.5; }
.m-warranty{
  margin-top:40px; display:inline-flex; align-items:center; gap:14px;
  border:1px solid rgba(69,212,203,.4); border-radius:10px; padding:14px 20px;
  font-family:var(--mono); font-size:14px; color:var(--coolant); letter-spacing:.02em;
}

/* ============================ CONSIDER (honest) ============================ */
.m-consider{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px 40px; margin-top:44px; max-width:960px; }
.m-consider li{ list-style:none; padding-left:26px; position:relative; font-size:15px; color:var(--muted-paper); }
.m-consider li::before{ content:"→"; position:absolute; left:0; top:0; color:var(--fluid-deep); font-family:var(--mono); }
.m-consider li b{ color:var(--ink-on-paper); font-family:var(--sans-7); font-weight:400; }

/* ============================ FINAL CTA ============================ */
.m-final{
  background:
    radial-gradient(90% 120% at 85% 0%, rgba(255,158,18,.18), transparent 55%),
    linear-gradient(180deg,#101d20,#0c1517);
  border-top:1px solid var(--line-dark);
}
.m-final-in{ display:grid; grid-template-columns:1.3fr .7fr; gap:40px; align-items:center; }
.m-final h2{ font-family:var(--disp); font-weight:400; font-size:clamp(26px,3.6vw,42px); text-transform:uppercase; line-height:1.05; margin:0 0 16px; }
.m-final p{ color:var(--text-soft); font-size:17px; margin:0; max-width:52ch; }
.m-final-act{ text-align:right; }
.m-final-act .m-note{ display:block; margin-top:16px; }

/* ============================ FOOTER ============================ */
.m-footer{ background:#0a1113; border-top:1px solid var(--line-dark); padding:52px 0 40px; }
.m-footer-in{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:30px; align-items:start; }
.m-footer .b-logo{ filter:brightness(0) invert(1); opacity:.9; margin-bottom:18px; }
.m-footer .co{ font-size:14px; color:var(--text-soft); line-height:1.6; }
.m-footer .lbl{ font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--fluid); margin-bottom:10px; }
.m-footer a{ color:var(--text); }
.m-footer a:hover{ color:var(--fluid-hi); }
.m-footer .fphone{ font-family:var(--sans-7); font-size:20px; color:#fff; }
.m-copy{ margin-top:36px; padding-top:20px; border-top:1px solid var(--line-dark); font-size:12.5px; color:var(--text-soft); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; }

/* ============================ REVEAL ============================ */
.m-rise{ opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s ease; }
.m-rise.in{ opacity:1; transform:none; }

/* ============================ RESPONSIVE ============================ */
@media (max-width:1080px){
  .m-adv{ grid-template-columns:repeat(2,1fr); }
  .m-steps{ grid-template-columns:repeat(2,1fr); }
  .m-proc{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:860px){
  .m-sec{ padding:70px 0; }
  .m-hero-grid{ grid-template-columns:1fr; gap:44px; padding:130px 0 76px; }
  .m-tank{ max-width:440px; margin:0 auto; order:2; }
  .m-final-in{ grid-template-columns:1fr; }
  .m-final-act{ text-align:left; }
  .m-who{ grid-template-columns:1fr; }
  .m-footer-in{ grid-template-columns:1fr 1fr; }
  .m-top-phone{ font-size:19px; }
}
@media (max-width:600px){
  body{ font-size:16px; }
  .m-wrap{ padding:0 18px; }
  .m-topbar{ padding:14px 18px; }
  .m-top-call{ display:none; }
  .m-adv,.m-steps,.m-proc,.m-consider{ grid-template-columns:1fr; }
  .m-cmp-row{ grid-template-columns:1fr; }
  .m-cmp-row > div{ padding:12px 18px; }
  .m-cmp-head{ display:none; }
  .m-cmp-row > div::before{ content:attr(data-l)" "; font-family:var(--mono); font-size:11px; color:var(--text-soft); text-transform:uppercase; letter-spacing:.1em; }
  .m-cmp-name::before{ content:"" !important; }
  .m-footer-in{ grid-template-columns:1fr; }
  .m-cta{ width:100%; justify-content:center; }
  .m-cta-row{ width:100%; }
}
@media (prefers-reduced-motion:reduce){
  .m-bub,.m-flow,.m-glow{ animation:none !important; }
  .m-rise{ transition:none; opacity:1; transform:none; }
}