/* TelegaChat — Telegram blue, readable sans */
:root{
  --bg:#e8f3f9;
  --fg:#0b1220;
  --muted:#4a5568;
  --border:rgba(34,158,217,.22);
  --border2:rgba(34,158,217,.12);
  --accent:#229ED9;
  --accent-light:#54a9eb;
  --accent-deep:#0088cc;
  --ink: rgba(11,18,32,.92);
  --shell:min(1120px, calc(100% - 40px));
  --mono:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --sans:"Noto Sans", "Inter", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
[hidden]{display:none !important}
body{
  margin:0;
  font-family:var(--sans);
  color:var(--fg);
  background: linear-gradient(165deg, #e8f0f8 0%, #e8f4fc 100%);
  -webkit-font-smoothing:antialiased;
}

/* Animated Telegram-blue gradient */
body::before{
  content:"";
  position:fixed;
  inset:-25% -25%;
  z-index:-2;
  pointer-events:none;
  background:
    radial-gradient(ellipse 90% 70% at 12% 18%, rgba(34,158,217,.32), transparent 55%),
    radial-gradient(ellipse 80% 60% at 88% 12%, rgba(84,169,235,.24), transparent 55%),
    radial-gradient(ellipse 70% 55% at 48% 88%, rgba(0,136,204,.2), transparent 58%),
    radial-gradient(ellipse 55% 55% at 72% 48%, rgba(34,158,217,.14), transparent 50%);
  filter: blur(42px);
  opacity:.95;
  animation: drift 22s ease-in-out infinite alternate;
}
body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background: linear-gradient(125deg,
    rgba(34,158,217,.12) 0%,
    rgba(255,255,255,.35) 42%,
    rgba(84,169,235,.1) 100%);
  animation: hueShift 28s ease-in-out infinite alternate;
}
@keyframes drift{
  from{transform: translate3d(-1.4%,-.8%,0) scale(1.02)}
  to{transform: translate3d(1.2%,.9%,0) scale(1.04)}
}
@keyframes hueShift{
  from{ opacity:.88; filter: hue-rotate(-3deg) saturate(1.05) }
  to{ opacity:1; filter: hue-rotate(5deg) saturate(1.06) }
}
@media (prefers-reduced-motion: reduce){
  body::before, body::after{animation:none}
}

a{color:inherit}
.shell{width:var(--shell); margin-inline:auto}
.mono{font-family:var(--mono)}

/* Card surfaces (glass + Telegram blue edge) */
.myna-frame{
  position:relative;
  overflow:hidden;
  border-radius:18px;
  border:1px solid rgba(34,158,217,.28);
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.6) inset,
    0 16px 48px rgba(34,158,217,.14);
  padding:20px;
}
.myna-frame::after{ content:none}

.skip{
  position:absolute;
  left:14px; top:12px;
  padding:10px 12px;
  background:rgba(255,255,255,.95);
  border:1px solid var(--border);
  transform:translateY(-200%);
  z-index:100;
}
.skip:focus{transform:translateY(0)}

/* Header — simple, crisp */
.navwrap{position:sticky; top:0; z-index:60}
.nav{
  height:64px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  border-bottom:1px solid rgba(34,158,217,.2);
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(232,244,252,.88));
  backdrop-filter: blur(12px);
}
.nav .shell{display:flex; align-items:center; justify-content:space-between; width:var(--shell); margin-inline:auto}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  font-family:var(--sans);
  font-weight:800;
  letter-spacing:-.02em;
  color: var(--fg);
}
.brand__mark{
  width:18px; height:18px;
  border-radius:6px;
  background: linear-gradient(145deg, var(--accent-light), var(--accent));
  border:1px solid rgba(34,158,217,.35);
}
.links{display:none; gap:18px}
.link{
  font-family:var(--sans);
  font-size:13px;
  font-weight:700;
  text-decoration:none;
  color:var(--fg);
  opacity:.82;
  transition:opacity .15s ease, color .15s ease;
}
.link:hover{opacity:1; color:var(--fg)}
@media (min-width: 900px){.links{display:flex}}

/* Buttons (rounded-none like reference) */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  height:44px;
  padding:0 16px;
  border:1px solid var(--border);
  background:#fff;
  color:var(--fg);
  text-decoration:none;
  font-family:var(--sans);
  font-weight:700;
  font-size:13px;
  letter-spacing:.01em;
  border-radius:0;
  cursor:pointer;
  transition: transform .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.btn:hover{transform: translateY(-1px); border-color: rgba(34,158,217,.45)}
.btn:focus-visible{outline:0; box-shadow:0 0 0 4px rgba(34,158,217,.22)}
.btn__ico{width:16px; height:16px; display:grid; place-items:center}
.btn__ico svg{width:100%; height:100%}
.btn--solid{
  background: var(--accent);
  border-color: rgba(34,158,217,.60);
  color:#fff;
}
.btn--solid:hover{background: rgba(34,158,217,.92)}
.btn--line{background:#fff}
.btn--sm{height:40px; padding:0 14px}
.btn--full{width:100%; justify-content:space-between}

/* Burger + drawer */
.burger{
  width:44px; height:44px;
  border:1px solid var(--border);
  background:#fff;
  border-radius:0;
  cursor:pointer;
}
.burger__lines{
  width:18px; height:2px;
  margin:0 auto;
  background: var(--fg);
  box-shadow: 0 -5px 0 var(--fg), 0 5px 0 var(--fg);
  display:block;
}
@media (min-width: 900px){.burger{display:none}}
@media (max-width: 899.98px){.nav .btn--sm{display:none}}

.overlay{position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:70}
.drawer{
  position:fixed;
  right:0;
  top:0;
  width:min(340px, 84vw);
  height:100vh;
  background: linear-gradient(180deg, #f8fcfe, #fff);
  border-left:1px solid rgba(34,158,217,.22);
  z-index:71;
  display:flex;
  flex-direction:column;
}
.drawer__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:16px;
  border-bottom:1px solid var(--border);
}
.drawer__brand{display:flex; align-items:center; gap:10px; font-family:var(--sans); font-weight:800; color: var(--fg)}
.close{
  width:40px; height:40px;
  border:1px solid var(--border);
  background:#fff;
  border-radius:0;
  cursor:pointer;
}
.close svg{width:18px; height:18px}
.drawer__nav{padding:10px 16px; display:grid; gap:6px}
.drawer__link{
  padding:12px 12px;
  border:1px solid transparent;
  font-family:var(--sans);
  font-weight:700;
  text-decoration:none;
  border-radius:0;
}
.drawer__link:hover{border-color: rgba(34,158,217,.35); background: rgba(34,158,217,.08)}
.drawer__actions{padding:16px; margin-top:auto; border-top:1px solid var(--border)}
.is-drawer-open{overflow:hidden}

/* Never show drawer on desktop */
@media (min-width: 900px){
  .overlay,.drawer{display:none !important}
}

/* Sections */
section{border-bottom:1px solid var(--border2)}

/* 1) Hero */
.hero{
  padding:38px 0 28px;
  position:relative;
}
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(ellipse 90% 70% at 50% 0%, rgba(34,158,217,.1), transparent 65%);
  pointer-events:none;
}
.micro{margin:0 0 12px; font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color: var(--fg); opacity:.72}
.hero__grid{display:grid; gap:22px; position:relative}

/* Fallback: сплошной синий, если градиент в тексте не поддерживается */
.h1{
  margin:0;
  font-family:var(--sans);
  font-weight:800;
  letter-spacing:-.03em;
  font-size: clamp(26px, 5.2vw, 48px);
  line-height:1.18;
  text-transform:none;
  color: #229ED9;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)){
  .h1,
  .h1 .h1__line{
    background: linear-gradient(135deg, #0088cc 0%, #229ED9 45%, #54a9eb 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }
}
.h1__line{
  display:block;
  margin:0;
  opacity:0;
  transform: translateY(16px);
  filter: blur(8px);
}
.is-hero-in .h1__line{
  opacity:1;
  transform: translateY(0);
  filter: blur(0);
  transition:
    opacity .55s ease var(--d,0ms),
    transform .55s ease var(--d,0ms),
    filter .55s ease var(--d,0ms);
}
@media (prefers-reduced-motion: reduce){
  .is-hero-in .h1__line{
    transition:none;
  }
}
.hero__sub{
  margin:18px auto 0;
  max-width: 72ch;
  font-family:var(--sans);
  font-size:17px;
  line-height:1.65;
  color:var(--fg);
  opacity:.9;
}
.labels{
  margin-top:18px;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:14px 22px;
}
.lab{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:8px 14px;
  font-family:var(--sans);
  font-size:13px;
  font-weight:600;
  color: var(--fg);
  background: rgba(255,255,255,.65);
  border:1px solid rgba(34,158,217,.25);
  border-radius:999px;
}
.lab svg{width:18px; height:18px; color: var(--fg); opacity:.85}
.hero__actions{margin-top:18px; display:flex; flex-wrap:wrap; justify-content:center; gap:10px}

/* Command deck panels */
.deck{border:0; background:transparent; padding:0}
.deck.myna-frame{padding:18px 18px 18px 22px}
.deck__grid{display:grid}
.panel{
  padding:16px 16px;
  border-bottom:1px solid rgba(34,158,217,.14);
  background: rgba(255,255,255,.9);
}
.panel:last-child{border-bottom:none}
.panel__k{font-family:var(--mono); font-size:11px; opacity:.65; text-transform:uppercase; color: var(--fg)}
.panel__v{margin-top:10px; font-weight:800; font-family:var(--sans); letter-spacing:-.02em; color: var(--ink)}
.panel__m{margin-top:10px; color:var(--fg); font-size:15px; line-height:1.65; font-family:var(--sans); opacity:.88}
.meter{margin-top:12px; height:10px; border:1px solid var(--border); background:#fff}
.meter i{display:block; height:100%; background: rgba(15,23,42,.16)}
.pillrow{margin-top:12px; display:flex; gap:8px; flex-wrap:wrap; font-family:var(--mono)}
.pillrow span{padding:6px 10px; border:1px solid var(--border); font-size:11px}
.pillrow .on{border-color: var(--border); background: #fff}
.spark{margin-top:12px; display:flex; gap:6px; align-items:flex-end; height:28px}
.spark span{flex:1; background: rgba(15,23,42,.14); height: 34%}
.tog{margin-top:12px; width:46px; height:24px; border:1px solid var(--border); background:#fff; position:relative}
.tog span{position:absolute; top:3px; left:24px; width:18px; height:18px; background: rgba(15,23,42,.75)}

@media (min-width: 900px){
  .hero{padding:76px 0 32px}
  .hero__grid{grid-template-columns: 1fr; text-align:center}
  .deck__grid{grid-template-columns: repeat(2, minmax(0,1fr))}
  .panel{border-bottom:none; border-right:1px solid rgba(34,158,217,.14)}
  .panel:nth-child(2n){border-right:none}
  .panel:nth-last-child(-n+2){border-top:1px solid rgba(34,158,217,.14)}
}

/* 2) Signal strip */
.signal{
  padding:0;
  background: linear-gradient(90deg, rgba(34,158,217,.1), rgba(0,136,204,.12));
  border-block:1px solid rgba(34,158,217,.18);
}
.strip{
  border:0;
  background:transparent;
  position:relative;
}
.strip.myna-frame{padding:0; box-shadow:none; background: rgba(255,255,255,.55)}
.strip.myna-frame::before{ opacity:.85}
.sig{
  padding:14px 16px;
  display:flex;
  align-items:center;
  gap:12px;
  border-bottom:1px solid rgba(34,158,217,.14);
  font-family:var(--sans);
  font-weight:700;
  font-size:13px;
  letter-spacing:.01em;
}
.sig:last-child{border-bottom:none}
.sig__led{
  width:9px; height:9px;
  background: rgba(11,18,32,.35);
  border:1px solid rgba(11,18,32,.25);
  border-radius:2px;
  display:inline-block;
  flex: 0 0 9px;
}
.sig__t{opacity:.95; color: var(--fg)}
@media (min-width: 900px){
  .strip{display:grid; grid-template-columns: repeat(6, minmax(0,1fr))}
  .sig{border-bottom:none; border-right:1px solid rgba(34,158,217,.14)}
  .sig:last-child{border-right:none}
  .sig--wide{
    grid-column: 6 / 7;
    justify-content:flex-start;
  }
  .sig--wide .sig__t{white-space:nowrap}
}

/* 3) Statement */
.statement{
  padding:64px 0;
  background: radial-gradient(ellipse 100% 80% at 50% 0%, rgba(34,158,217,.08), transparent 55%);
}
.statement__inner{
  max-width: 980px;
  padding: 32px 28px;
  border-radius: 20px;
  border:1px solid rgba(34,158,217,.2);
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(10px);
  box-shadow: 0 12px 40px rgba(34,158,217,.1);
}
.h2{
  margin-bottom:20px;
  font-family:var(--sans);
  font-weight:800;
  text-transform:none;
  letter-spacing:-.02em;
  font-size: clamp(22px, 4vw, 2.1rem);
  line-height:1.28;
  color: var(--accent-deep);
}
.p{margin:18px 0 0; font-family:var(--sans); font-size:17px; color:var(--fg); line-height:1.7; opacity:.92}
.accentline{
  margin:26px 0 0;
  padding-top:18px;
  border-top:1px solid rgba(34,158,217,.22);
  font-family:var(--sans);
  font-weight:600;
  letter-spacing:.04em;
  font-size:13px;
  color: var(--fg);
  opacity:.9;
}
.microline{
  margin:18px 0 0;
  font-family:var(--sans);
  font-weight:600;
  letter-spacing:.03em;
  font-size:13px;
  color: var(--fg);
  opacity:.9;
}

/* 4) Mode selector */
.modes{
  padding:64px 0;
  background: linear-gradient(180deg, transparent, rgba(34,158,217,.05) 50%, transparent);
}
.modes__grid{display:grid; gap:16px}
.switch{
  border:0;
  background:transparent;
}
.switch.myna-frame{padding:0; overflow:hidden}
.switch__tabs{display:grid; gap:0; border-bottom:1px solid rgba(34,158,217,.18)}
.tab{
  padding:14px 14px;
  border:0;
  border-bottom:1px solid rgba(34,158,217,.12);
  background:rgba(255,255,255,.9);
  cursor:pointer;
  text-align:left;
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  font-family:var(--sans);
}
.tab:last-child{border-bottom:none}
.tab__k{font-size:11px; opacity:.65; text-transform:uppercase; letter-spacing:.12em; color: var(--fg)}
.tab__t{font-weight:800; letter-spacing:-.01em; color: var(--fg)}
.tab.is-on{background: linear-gradient(180deg, rgba(34,158,217,.12), rgba(34,158,217,.06))}
.switch__panel{padding:20px 18px 22px; background: rgba(255,255,255,.5)}
.panelview__cap{font-family:var(--mono); font-size:11px; opacity:.65; text-transform:uppercase; letter-spacing:.12em; color: var(--fg)}
.panelview__h{margin-top:10px; font-family:var(--sans); font-weight:800; font-size:1.25rem; letter-spacing:-.02em; color: var(--fg)}
.panelview__p{margin-top:12px; font-family:var(--sans); font-size:16px; color:var(--fg); line-height:1.7; opacity:.88}
.route{
  border:1px solid rgba(34,158,217,.25);
  padding:16px 14px;
  margin-top:14px;
  position:relative;
  background:rgba(255,255,255,.85);
  border-radius:12px;
}
.route__line{
  display:block;
  height:2px;
  background: linear-gradient(90deg, rgba(11,18,32,.35), rgba(11,18,32,.12));
  margin-top:6px;
  border-radius:2px;
}
.route__dot{
  position:absolute;
  left:14px;
  top:16px;
  width:9px; height:9px;
  background: rgba(15,23,42,.16);
  border:1px solid rgba(15,23,42,.26);
}
@media (min-width: 900px){
  .modes__grid{grid-template-columns: .92fr 1.08fr; gap:26px; align-items:start}
  .switch__tabs{grid-template-columns: repeat(2, minmax(0,1fr))}
  .tab{border-bottom:0; border-right:1px solid rgba(34,158,217,.14)}
  .tab:nth-child(2n){border-right:none}
  .tab:nth-child(n+3){border-top:1px solid rgba(34,158,217,.14)}
}

/* 5) Protocols */
.protocols{
  padding:64px 0;
  background: rgba(255,255,255,.4);
}
.protohead{max-width: 920px}
.qhead{margin-bottom:8px}
.proto{margin-top:22px; display:grid; gap:14px}
.rule{
  border:0;
  background:white;
  padding:18px 18px;
}
.rule.myna-frame{padding:18px 18px 18px 22px}
.rule__top{display:flex; align-items:center; justify-content:space-between; gap:12px}
.rule__id,.rule__tag{font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.12em; opacity:.7; color: var(--fg)}
.rule__h{margin-top:12px; font-family:var(--sans); font-weight:800; letter-spacing:-.02em; font-size:1.1rem; color: var(--fg)}
.rule__p{margin-top:10px; font-family:var(--sans); font-size:16px; color:var(--fg); line-height:1.7; opacity:.88}
.rule__foot{margin-top:14px; font-family:var(--mono); font-size:11px; opacity:.6; text-transform:uppercase; letter-spacing:.12em; color: var(--fg)}
@media (min-width: 900px){.proto{grid-template-columns: repeat(3, minmax(0,1fr)); gap:16px}}

/* 6) Scenario board */
.board{padding:64px 0}
.field{
  border:0;
  background:transparent;
  padding:18px;
  position:relative;
}
.field.myna-frame{padding:18px 18px 18px 22px}
.sc{
  position:relative;
  border:1px solid rgba(34,158,217,.22);
  padding:18px;
  background: rgba(255,255,255,.88);
  border-radius:14px;
  box-shadow: 0 8px 28px rgba(34,158,217,.08);
}
.sc__h{font-family:var(--sans); font-weight:800; letter-spacing:-.02em; font-size:1.05rem; color: var(--fg)}
.sc__p{margin-top:10px; font-family:var(--sans); font-size:16px; color:var(--fg); line-height:1.7; opacity:.88}
.sc__meta{margin-top:14px; font-family:var(--mono); font-size:11px; opacity:.6; text-transform:uppercase; letter-spacing:.12em; color: var(--fg)}
.field{display:grid; gap:14px}
@media (min-width: 900px){
  .field{grid-template-columns: 1.2fr .8fr; grid-template-rows:auto auto; gap:14px}
  .sc--a{grid-column:1; grid-row:1}
  .sc--b{grid-column:2; grid-row:1}
  .sc--c{grid-column:1; grid-row:2}
  .sc--d{grid-column:2; grid-row:2}
}

/* 7) Proof */
.proof{padding:64px 0}
.proof__grid{display:grid; gap:16px}
.proof__right{
  border:0;
  background:transparent;
  padding:16px;
  position:relative;
}
.proof__right.myna-frame{padding:16px 16px 16px 20px}
.evi{border:1px solid rgba(34,158,217,.2); padding:16px; background:rgba(255,255,255,.9); border-radius:12px}
.evi + .evi{margin-top:12px}
.evi__k{font-family:var(--mono); font-size:11px; opacity:.65; text-transform:uppercase; letter-spacing:.12em; color: var(--fg)}
.evi__h{margin-top:10px; font-family:var(--sans); font-weight:800; font-size:1.05rem; color: var(--fg)}
.evi__p{margin-top:8px; font-family:var(--sans); font-size:16px; color:var(--fg); line-height:1.7; opacity:.88}
.proof__stamp{position:absolute; right:16px; bottom:14px; font-family:var(--mono); font-size:11px; opacity:.55; text-transform:uppercase; letter-spacing:.12em; color: var(--fg)}
@media (min-width: 900px){.proof__grid{grid-template-columns: .92fr 1.08fr; gap:26px; align-items:start}}

/* 8) Install */
.install{padding:64px 0; background: radial-gradient(ellipse 80% 60% at 50% 100%, rgba(34,158,217,.1), transparent 60%)}
.install__actions{margin-top:18px; display:flex; flex-wrap:wrap; gap:10px}
.deck2{
  margin-top:18px;
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:14px;
}
.step{
  border:0;
  background:#fff;
  padding:18px;
}
.step.myna-frame{
  padding:18px 18px 18px 22px;
  background:#fff;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
.step__n{font-family:var(--mono); font-size:11px; opacity:.65; text-transform:uppercase; letter-spacing:.12em; color: var(--fg)}
.step__t{margin-top:10px; font-family:var(--sans); font-weight:800; letter-spacing:-.02em; font-size:1.05rem; color: var(--fg)}
.step__hint{margin-top:12px; font-family:var(--mono); font-size:11px; opacity:.55; text-transform:uppercase; letter-spacing:.12em; color: var(--fg)}
@media (max-width: 559.98px){
  .deck2{grid-template-columns:1fr}
}

/* 9) FAQ */
.questions{padding:64px 0}
.console{
  border:0;
  background:transparent;
  overflow:hidden;
}
.console.myna-frame{padding:0; overflow:hidden}
.console__left{padding:14px; border-bottom:1px solid rgba(34,158,217,.16); display:grid; gap:8px; background: rgba(255,255,255,.45)}
.q{
  border:1px solid rgba(34,158,217,.18);
  background:rgba(255,255,255,.92);
  padding:12px 14px;
  cursor:pointer;
  text-align:left;
  display:flex;
  align-items:center;
  gap:12px;
  font-family:var(--sans);
  border-radius:10px;
}
.q.is-on{background: rgba(34,158,217,.1); border-color: rgba(34,158,217,.35)}
.q__k{font-size:11px; opacity:.65; text-transform:uppercase; letter-spacing:.12em; color: var(--fg)}
.q__t{font-weight:800; letter-spacing:-.01em; color: var(--fg)}
.console__right{padding:20px 18px; position:relative; background: rgba(255,255,255,.55)}
.ans__k{font-family:var(--mono); font-size:11px; opacity:.65; text-transform:uppercase; letter-spacing:.12em; color: var(--fg)}
.ans__h{margin-top:10px; font-family:var(--sans); font-weight:800; letter-spacing:-.02em; font-size:1.15rem; color: var(--fg)}
.ans__p{margin-top:10px; font-family:var(--sans); font-size:16px; color:var(--fg); line-height:1.7; opacity:.88}
@media (min-width: 900px){
  .console{display:grid; grid-template-columns: .92fr 1.08fr}
  .console__left{border-bottom:none; border-right:1px solid rgba(34,158,217,.16)}
}

/* 10) Final CTA */
.final{padding:64px 0 88px}
.cmd{
  position:relative;
  margin:0 auto;
  max-width: 880px;
  padding: 28px 22px;
}
.cmd.myna-frame{padding:28px 22px 28px 26px}
.cmd__inner{position:relative}
.cmd__left{max-width: 72ch; margin-inline:auto}
.cmd__right{margin-top:22px; display:flex; justify-content:center; gap:10px; flex-wrap:wrap}
.cmd .h2{
  font-size: clamp(22px, 4vw, 2rem);
  background: linear-gradient(135deg, #0088cc 0%, #229ED9 50%, #54a9eb 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* 11) Footer */
.footer{
  border-top:1px solid rgba(34,158,217,.2);
  background: linear-gradient(180deg, rgba(232,244,252,.95), #fff);
  padding:44px 0 28px;
}
.footer__top{display:grid; gap:22px; padding-bottom:22px; border-bottom:1px solid rgba(34,158,217,.14)}
.foot__h{font-family:var(--sans); font-weight:800; letter-spacing:-.02em; font-size:1.15rem; color: var(--fg)}
.foot__k{font-family:var(--mono); font-size:11px; opacity:.7; text-transform:uppercase; letter-spacing:.12em; margin-bottom:10px; color: var(--fg)}
.foot__p{font-family:var(--sans); font-size:15px; color:var(--fg); line-height:1.7; opacity:.88}
.footer__bottom{padding-top:16px; display:flex; flex-direction:column; gap:10px; font-family:var(--sans); font-size:13px; opacity:.78}
.footer__links a{text-decoration:none}
.footer__links a:hover{color:var(--fg); opacity:1}
.sep{margin:0 8px; opacity:.7}
@media (min-width: 900px){
  .footer__top{grid-template-columns: 1.25fr 1fr 1fr 1fr; gap:18px}
  .footer__bottom{flex-direction:row; justify-content:space-between; align-items:center}
}