/* ShipSculpt — single-page, 3-file build (HTML/CSS/JS) */
:root{
  --bg0:#070b1c;
  --bg1:#0b1230;
  --bg2:#0f172a;
  --ink:#e7eefc;
  --muted:rgba(231,238,252,.72);
  --line:rgba(231,238,252,.12);
  --card:rgba(255,255,255,.07);
  --card2:rgba(255,255,255,.05);
  --accent:#7dd3fc;
  --accent2:#a78bfa;
  --shadow:0 18px 46px rgba(0,0,0,.35);
  --radius:20px;
  --radius2:28px;
  --max:1120px;
  --brandLogoH:150px;
  --footerLogoH:56px;
  --focus:0 0 0 4px rgba(125,211,252,.22);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Helvetica Neue", sans-serif;
  color:var(--ink);
  background:
    radial-gradient(1200px 600px at 15% 10%, rgba(167,139,250,.22), transparent 55%),
    radial-gradient(900px 500px at 85% 25%, rgba(125,211,252,.18), transparent 52%),
    linear-gradient(180deg, var(--bg0), var(--bg2));
  overflow-x:hidden;
}

a{color:inherit}
a:hover{opacity:.95}
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline:none;
  box-shadow:var(--focus);
  border-radius:12px;
}

.container{max-width:var(--max); margin:0 auto; padding:0 18px;}
.section{padding:84px 0;}
.section--alt{
  background:
    radial-gradient(900px 450px at 10% 20%, rgba(125,211,252,.10), transparent 55%),
    radial-gradient(900px 450px at 90% 70%, rgba(167,139,250,.10), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.00));
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.h2{font-size: clamp(26px, 3vw, 34px); line-height:1.12; margin:0 0 10px;}
.h3{font-size: 20px; margin:0 0 8px; letter-spacing:.2px}
.lead{font-size: 18px; line-height:1.6; color:var(--muted); margin:0 0 14px;}
.muted{color:var(--muted)}
.kicker{
  font-size:12px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:rgba(231,238,252,.70);
  margin:0 0 14px;
}

/* Topbar */
.topbar{
  position:fixed; inset:0 0 auto 0;
  z-index:60;
  border-bottom:1px solid rgba(231,238,252,.10);
  background: rgba(5,7,18,.55);
  backdrop-filter: blur(10px);
}
.topbar__inner{
  max-width:var(--max);
  margin:0 auto;
  padding:12px 18px;

  display:flex;
  align-items:center;
  gap:16px;
  position:relative;
}

/* Force nav perfectly centered in the container (independent of logo/button widths) */
.topbar__inner .nav--center{
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%, -50%);
  display:flex;
  gap:22px;
  justify-content:center;
  align-items:center;
  width:max-content;
  z-index:1;
}

/* Keep edge items above the centered nav (prevents overlap clicks) */
.topbar__inner .brand,
.topbar__inner .topbar__menuBtn{
  position:relative;
  z-index:2;
}


.brand__logo{
  height: var(--brandLogoH);
  width: auto;
  display:block;
  object-fit: contain;
  flex: 0 0 auto;
}

.footer__logo{
  height: var(--footerLogoH);
  width: auto;
  display:block;
  object-fit: contain;
  flex: 0 0 auto;
}
.brand{
  display:flex; align-items:center; gap:12px;
  text-decoration:none;
  min-width: 0;
}
.brand__mark{
  width:40px; height:40px;
  display:grid; place-items:center;
  border-radius:14px;
  background:linear-gradient(135deg, rgba(125,211,252,.12), rgba(167,139,250,.10));
  border:1px solid rgba(231,238,252,.12);
  box-shadow:0 12px 30px rgba(0,0,0,.22);
}
.brand__mark svg{width:26px; height:26px; color:#dbeafe}
.brand__text{display:flex; flex-direction:column; line-height:1.05}
.brand__name{font-weight:700; letter-spacing:.2px}
.brand__tag{font-size:12px; color:rgba(231,238,252,.65)}

.nav--center{
  display:flex;
  justify-content:center;
  justify-self:center;
  gap:22px;
  min-width:0;
}
.nav__link{
  text-decoration:none;
  font-size:13px;
  letter-spacing:.04em;
  color:rgba(231,238,252,.78);
  padding:8px 10px;
  border-radius:999px;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.nav__link:hover{
  background:rgba(255,255,255,.06);
  color:#fff;
  transform: translateY(-1px);
}
.topbar__menuBtn{margin-left:auto; display:none;}

.iconbtn{
  border:1px solid rgba(231,238,252,.14);
  background: rgba(255,255,255,.05);
  color:var(--ink);
  width:44px; height:44px;
  border-radius:14px;
  display:grid; place-items:center;
  cursor:pointer;
  box-shadow: 0 10px 28px rgba(0,0,0,.25);
  transition: transform .2s ease, background .2s ease;
}
.iconbtn:hover{transform: translateY(-1px); background:rgba(255,255,255,.07)}
.iconbtn__bars{
  width:18px; height:12px; position:relative;
}
.iconbtn__bars::before,.iconbtn__bars::after,.iconbtn__bars{content:""; display:block; background:rgba(231,238,252,.85); border-radius:999px; height:2px;}
.iconbtn__bars::before{position:absolute; left:0; right:0; top:0}
.iconbtn__bars{position:absolute; left:13px; right:13px}
.iconbtn__bars::after{position:absolute; left:0; right:0; bottom:0}
.iconbtn__x{
  width:18px; height:18px; position:relative;
}
.iconbtn__x::before,.iconbtn__x::after{
  content:""; position:absolute; inset:8px 0 auto 0;
  height:2px; background:rgba(231,238,252,.85); border-radius:999px;
  transform-origin:center;
}
.iconbtn__x::before{transform:rotate(45deg)}
.iconbtn__x::after{transform:rotate(-45deg)}

/* Drawer */
.drawer{
  position:fixed; inset:0;
  z-index:80;
  background: rgba(0,0,0,.45);
  opacity:0; pointer-events:none;
  transition: opacity .2s ease;
}
.drawer.is-open{opacity:1; pointer-events:auto;}
.drawer__panel{
  position:absolute; right:14px; top:14px;
  width:min(420px, calc(100% - 28px));
  background: rgba(7,11,28,.92);
  border:1px solid rgba(231,238,252,.12);
  border-radius:var(--radius2);
  box-shadow: var(--shadow);
  padding:14px;
  transform: translateY(-6px);
  animation: pop .24s ease both;
}
@keyframes pop{from{opacity:.2; transform: translateY(-12px) scale(.98)} to{opacity:1; transform: translateY(0) scale(1)}}
.drawer__top{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:4px 6px 10px;}
.drawer__title{font-weight:700; letter-spacing:.2px}
.drawer__nav{display:grid; gap:8px; padding:6px}
.drawer__link{
  text-decoration:none;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid rgba(231,238,252,.10);
  background: rgba(255,255,255,.05);
  transition: transform .2s ease, background .2s ease;
}
.drawer__link:hover{transform: translateY(-1px); background:rgba(255,255,255,.07)}
.drawer__link--legal{background:rgba(167,139,250,.07)}
.drawer__cta{padding:8px 6px 2px}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:10px;
  text-decoration:none;
  padding:12px 16px;
  border-radius:999px;
  border:1px solid rgba(231,238,252,.14);
  background: rgba(255,255,255,.05);
  color:var(--ink);
  cursor:pointer;
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
  box-shadow:0 16px 40px rgba(0,0,0,.25);
}
.btn:hover{transform: translateY(-1px); background:rgba(255,255,255,.07); border-color:rgba(231,238,252,.20)}
.btn--primary{
  background: linear-gradient(135deg, rgba(125,211,252,.24), rgba(167,139,250,.20));
  border-color: rgba(125,211,252,.28);
}
.btn--ghost{background: rgba(255,255,255,.03)}
.btn--sm{padding:10px 14px; width:46px; height:42px; border-radius:16px}
.btn--wide{width:100%}

/* Hero */
.hero{
  position:relative;
  min-height: 92vh;
  display:flex;
  align-items:center;
  padding-top:88px; /* topbar offset */
  overflow:hidden;
}
.hero__bg{
  position:absolute; inset:0;
  background:
    radial-gradient(900px 520px at 20% 20%, rgba(167,139,250,.28), transparent 60%),
    radial-gradient(900px 520px at 80% 30%, rgba(125,211,252,.20), transparent 60%),
    linear-gradient(180deg, rgba(5,7,18,1), rgba(11,18,48,1));
}
.hero__net{
  position:absolute; inset:-12% -8% -12% -8%;
  width:116%; height:116%;
  opacity:.85;
  filter: blur(.15px);
}
.hero__content{position:relative; z-index:1; padding:28px 0 44px;}
.hero__title{
  margin:0 0 14px;
  font-weight:750;
  line-height:1.05;
  letter-spacing:-.01em;
  font-size: clamp(30px, 4.5vw, 54px);
}
.hero__sub{
  max-width: 70ch;
  margin:0 0 18px;
  color:rgba(231,238,252,.78);
  line-height:1.65;
  font-size:16px;
}
.hero__cta{display:flex; gap:12px; flex-wrap:wrap; margin: 16px 0 18px;}
.hero__meta{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:12px;
  margin-top: 24px;
}
.metaCard{
  padding:14px 14px;
  border:1px solid rgba(231,238,252,.12);
  background: rgba(255,255,255,.05);
  border-radius: 18px;
  box-shadow: 0 18px 42px rgba(0,0,0,.25);
}
.metaCard__big{font-weight:700}
.metaCard__small{color:rgba(231,238,252,.70); font-size:13px; margin-top:3px}

/* Section headers */
.sectionHead{margin:0 0 22px}
.sectionHead--center{text-align:center; margin:0 0 26px}
.wave{
  width:52px; height:10px; margin:14px auto 0;
  border-radius:999px;
  background: repeating-linear-gradient(90deg, rgba(231,238,252,.55), rgba(231,238,252,.55) 8px, transparent 8px, transparent 14px);
  opacity:.45;
}

/* About grid */
.gridA{
  display: grid;
  grid-template-columns: 1fr 1fr; /* ровные колонки, меньше перекоса */
  gap: 50px;
  align-items: start;
}
.gridA__media{
  justify-self: center;
}
.mediaFrame{
  position:relative;
  border-radius: var(--radius2);
  border:1px solid rgba(231,238,252,.14);
  background: rgba(255,255,255,.04);
  box-shadow: var(--shadow);
  overflow:hidden;
  padding: 18px;
}
.mediaFrame__photo{
  height: 340px;
  border-radius: 22px;
  background:
    radial-gradient(520px 280px at 55% 40%, rgba(125,211,252,.22), transparent 60%),
    radial-gradient(520px 280px at 40% 62%, rgba(167,139,250,.20), transparent 60%),
    linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid rgba(231,238,252,.12);
  position:relative;
}
.mediaFrame__stripe{
  position:absolute; inset:auto -10% -18% -10%;
  height: 60%;
  background: repeating-linear-gradient(135deg, rgba(231,238,252,.14), rgba(231,238,252,.14) 8px, transparent 8px, transparent 18px);
  opacity:.35;
  transform: rotate(-3deg);
  pointer-events:none;
}
.mediaFrame__note{
  margin-top:12px;
  font-size:12px;
  color:rgba(231,238,252,.65);
}

/* HUD overlay */
.hud{position:absolute; inset:0; display:grid; place-items:center; pointer-events:none;}
.hud__ring{
  width: 190px; height:190px; border-radius:50%;
  border: 2px solid rgba(125,211,252,.35);
  box-shadow: 0 0 0 10px rgba(125,211,252,.08);
  position:relative;
  animation: ring 6s ease-in-out infinite;
}
.hud__ring::after{
  content:""; position:absolute; inset:14px;
  border-radius:50%;
  border: 2px dashed rgba(167,139,250,.26);
  opacity:.9;
}
.hud__line{
  position:absolute; width: 340px; height:2px;
  background: linear-gradient(90deg, transparent, rgba(231,238,252,.25), transparent);
  transform: rotate(-10deg);
  opacity:.6;
}
.hud__dot{
  position:absolute; width:10px; height:10px; border-radius:50%;
  background: rgba(125,211,252,.55);
  box-shadow: 0 0 0 6px rgba(125,211,252,.12);
  transform: translate(120px, -32px);
  animation: dot 3.8s ease-in-out infinite;
}
@keyframes ring{0%,100%{transform: scale(1)}50%{transform: scale(1.03)}}
@keyframes dot{0%,100%{transform: translate(120px, -32px)}50%{transform: translate(112px, -18px)}}

/* Feature stack */
.featureStack{
  display: grid;
  grid-template-columns: repeat(2, minmax(320px, 1fr));
  gap: 18px;

  /* THIS centers the whole grid block */
  justify-content: center;
  justify-items: stretch;

  /* Optional: limit max width so it doesn't stick to the right */
  max-width: 760px;
  margin: 0 auto;
}
.featureCard{
  border-radius: 28px;   /* 50px слишком “пузырь” — но можешь оставить */
  border: 1px solid rgba(231,238,252,.12);
  background: rgba(255,255,255,.05);

  padding: 22px 22px;    /* больше внутренние отступы */
  min-height: 210px;     /* ключевое: увеличиваем высоту */
  box-shadow: 0 18px 44px rgba(0,0,0,.26);

  transition: transform .22s ease, background .22s ease, border-color .22s ease;
  position: relative;
  overflow: hidden;
}
.featureCard::after{
  content:""; position:absolute; inset:-20% -30%;
  background: radial-gradient(closest-side, rgba(125,211,252,.14), transparent 55%);
  opacity:.9;
  transform: translateX(-30%);
  transition: transform .5s ease;
}
.featureCard:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255,.07);
  border-color: rgba(231,238,252,.20);
}
.featureCard:hover::after{transform: translateX(0)}
.featureCard__icon{
  width:40px; height:40px;
  border-radius: 14px;
  display:grid; place-items:center;
  border:1px solid rgba(231,238,252,.12);
  background: rgba(255,255,255,.04);
  margin-bottom:10px;
}
.featureCard__icon svg{width:22px; height:22px; color:#dbeafe}
.featureCard__title{font-weight:750; margin-bottom:6px}
.featureCard__text{color:rgba(231,238,252,.72); line-height:1.55; font-size:13px; position:relative; z-index:1}

/* Copy side */
.pillRow{display:flex; gap:10px; flex-wrap:wrap; margin: 12px 0 18px}
.pill{
  font-size:12px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(231,238,252,.14);
  background: rgba(255,255,255,.04);
  color:rgba(231,238,252,.78);
}
.callout{
  margin: 16px 0 18px;
  padding: 16px 16px;
  border-radius: var(--radius);
  border:1px solid rgba(231,238,252,.12);
  background: linear-gradient(135deg, rgba(125,211,252,.10), rgba(167,139,250,.08));
  box-shadow: 0 18px 46px rgba(0,0,0,.22);
}
.callout__title{font-weight:750; margin-bottom:10px}
.check{margin:0; padding-left:18px; color:rgba(231,238,252,.78); line-height:1.65}
.microGrid{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
  margin-top: 14px;
}
.microStat{
  border-radius: 18px;
  border:1px solid rgba(231,238,252,.10);
  background: rgba(255,255,255,.03);
  padding:12px 14px;
}
.microStat__k{font-size:12px; color:rgba(231,238,252,.65); letter-spacing:.12em; text-transform:uppercase}
.microStat__v{margin-top:5px; color:rgba(231,238,252,.78)}
.actions{display:flex; gap:12px; flex-wrap:wrap; margin-top:18px}

/* Services */
.cards{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.svc{
  border-radius: var(--radius2);
  border:1px solid rgba(231,238,252,.12);
  background: rgba(255,255,255,.04);
  padding:16px 16px;
  box-shadow: 0 18px 44px rgba(0,0,0,.24);
  position:relative;
  overflow:hidden;
  transition: transform .22s ease, border-color .22s ease, background .22s ease;
}
.svc:hover{transform: translateY(-2px); border-color:rgba(231,238,252,.20); background: rgba(255,255,255,.06)}
.svc::after{
  content:""; position:absolute; inset:-40% -30%;
  background: radial-gradient(closest-side, rgba(167,139,250,.12), transparent 55%);
  transform: translateX(-18%);
  transition: transform .5s ease;
}
.svc:hover::after{transform: translateX(0)}
.svc__top{display:flex; align-items:baseline; justify-content:space-between; gap:10px; position:relative; z-index:1}
.svc__title{font-weight:800}
.svc__price{font-weight:800; color:#e9d5ff}
.svc__text{color:rgba(231,238,252,.75); line-height:1.6; margin: 10px 0 10px; position:relative; z-index:1}
.svc__list{margin:0; padding-left:18px; color:rgba(231,238,252,.74); line-height:1.65; font-size:13px; position:relative; z-index:1}

.noteBar{
  margin-top: 18px;
  border-radius: var(--radius);
  border:1px solid rgba(231,238,252,.12);
  background: rgba(255,255,255,.03);
  padding: 12px 14px;
  display:flex; gap:12px; align-items:flex-start;
}
.noteBar__dot{
  width:10px; height:10px; border-radius:50%;
  background: rgba(125,211,252,.65);
  box-shadow: 0 0 0 6px rgba(125,211,252,.12);
  margin-top:4px;
}
.noteBar__text{margin:0; color:rgba(231,238,252,.70); line-height:1.6; font-size:13px}

/* Approach */
.tri{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 10px;
}
.triCard{
  border-radius: var(--radius2);
  border:1px solid rgba(231,238,252,.12);
  background: rgba(255,255,255,.04);
  padding:16px 16px;
  box-shadow: 0 18px 40px rgba(0,0,0,.24);
}
.triCard--raised{
  transform: translateY(-8px);
  background: linear-gradient(135deg, rgba(125,211,252,.10), rgba(167,139,250,.08));
}
.triCard__title{font-weight:800; margin-bottom:8px}
.triCard__text{margin:0; color:rgba(231,238,252,.74); line-height:1.6}

.circleBlock{
  margin-top: 22px;
  display:grid;
  grid-template-columns: 280px 1fr;
  gap: 18px;
  align-items:center;
  border-radius: var(--radius2);
  border:1px solid rgba(231,238,252,.12);
  background: rgba(255,255,255,.03);
  padding: 18px;
  box-shadow: var(--shadow);
}
.circleBlock__circle{
  width: 260px; height: 260px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255,255,255,.07), rgba(255,255,255,.02));
  border:1px solid rgba(231,238,252,.12);
  display:grid; place-items:center;
  margin:auto;
  overflow:hidden;
}
.circleBlock__svg{width: 100%; height:100%}
.badgeRow{display:flex; flex-wrap:wrap; gap:10px; margin-top:12px}
.badge{
  font-size:12px;
  padding:7px 10px;
  border-radius: 999px;
  border:1px solid rgba(231,238,252,.14);
  background: rgba(255,255,255,.03);
  color:rgba(231,238,252,.78);
}

/* Reviews */
.reviews{
  border-radius: var(--radius2);
  border:1px solid rgba(231,238,252,.12);
  background: rgba(255,255,255,.03);
  padding: 14px;
  box-shadow: var(--shadow);
  overflow:hidden;
}
.reviews__track{
  display:flex;
  gap: 12px;
  will-change: transform;

to{transform: translateX(-50%)}
}
.review{
  min-width: 320px;
  max-width: 360px;
  border-radius: 20px;
  border:1px solid rgba(231,238,252,.12);
  background: rgba(255,255,255,.05);
  padding: 14px 14px;
  box-shadow: 0 16px 36px rgba(0,0,0,.22);
  position:relative;
  overflow:hidden;
}
.review::after{
  content:""; position:absolute; inset:-40% -20%;
  background: radial-gradient(closest-side, rgba(125,211,252,.12), transparent 56%);
  transform: translateX(-24%);
  transition: transform .5s ease;
}
.review:hover::after{transform: translateX(0)}
.review__stars{letter-spacing:.12em; color:#fde68a; font-size:12px}
.review__text{margin:10px 0 12px; color:rgba(231,238,252,.78); line-height:1.6; position:relative; z-index:1}
.review__who{display:flex; flex-direction:column; gap:2px; position:relative; z-index:1}
.review__name{font-weight:800}
.review__role{font-size:12px; color:rgba(231,238,252,.65)}
.reviews__controls{
  margin-top: 12px;
  display:flex; align-items:center; gap:10px;
}
.reviews__hint{font-size:12px}

/* Contact */
.contactGrid{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 14px;
  align-items:start;
}
.form{
  border-radius: var(--radius2);
  border:1px solid rgba(231,238,252,.12);
  background: rgba(255,255,255,.03);
  padding: 16px;
  box-shadow: var(--shadow);
}
.form__row{display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px}
.field{display:flex; flex-direction:column; gap:7px; margin-bottom:12px}
.field__label{font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:rgba(231,238,252,.66)}
.field__input{
  width:100%;
  border-radius: 16px;
  border:1px solid rgba(231,238,252,.14);
  background: rgba(255,255,255,.04);
  color:var(--ink);
  padding: 12px 12px;
  font-size: 14px;
  line-height:1.4;
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.field__input::placeholder{color:rgba(231,238,252,.45)}
.field__input:focus{border-color:rgba(125,211,252,.35); background:rgba(255,255,255,.06)}
.field__input--area{min-height: 140px; resize: vertical}
.field__error{font-size:12px; color:#fecaca; min-height: 14px}

.form__actions{display:flex; gap:10px; flex-wrap:wrap; margin-top: 6px}
.form__fine{font-size:12px; margin-top: 10px}

.infoCards{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.infoCard{
  border-radius: 20px;
  border:1px solid rgba(231,238,252,.12);
  background: rgba(255,255,255,.04);
  padding: 14px 14px;
  box-shadow: 0 18px 38px rgba(0,0,0,.22);
}
.infoCard__k{font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:rgba(231,238,252,.66)}
.infoCard__v{margin-top:6px; color:rgba(231,238,252,.78); line-height:1.5}
.infoCard__v a{color:rgba(231,238,252,.86); text-decoration:none}
.infoCard__v a:hover{text-decoration:underline}

/* Footer */
.footer{
  border-top: 1px solid rgba(231,238,252,.10);
  background: rgba(0,0,0,.12);
  padding: 40px 0 20px;
}
.footer__grid{
  display:grid;
  grid-template-columns: 1.3fr .6fr .6fr .6fr;
  gap: 16px;
  align-items:start;
}
.footer__brand{
  display:flex; gap: 12px; align-items:flex-start;
  border-radius: var(--radius2);
  border:1px solid rgba(231,238,252,.10);
  background: rgba(255,255,255,.03);
  padding: 14px 14px;
}
.footer__logo{
  height:100px;
  border-radius: 16px;
  border:1px solid rgba(231,238,252,.12);
  background: rgba(255,255,255,.04);
  display:grid; place-items:center;
}
.footer__logo svg{width:24px; height:24px; color:#dbeafe}
.footer__name{font-weight:850}
.footer__desc{margin-top:6px; color:rgba(231,238,252,.70); line-height:1.55; font-size:13px}
.footer__head{font-weight:850; margin: 6px 0 10px}
.footer__col{display:flex; flex-direction:column}
.footer__col--small .footer__mini{font-size:13px; line-height:1.6}
.footer__link{
  text-decoration:none;
  color:rgba(231,238,252,.76);
  padding: 8px 10px;
  border-radius: 14px;
  border:1px solid transparent;
}
.footer__link:hover{background: rgba(255,255,255,.04); border-color: rgba(231,238,252,.10)}
.footer__bottom{
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(231,238,252,.10);
  display:flex; align-items:center; justify-content:space-between;
  gap: 12px;
}
.toTop{text-decoration:none; padding:8px 10px; border-radius: 14px; border:1px solid rgba(231,238,252,.12); background: rgba(255,255,255,.03)}
.toTop:hover{background: rgba(255,255,255,.05)}

/* Legal overlay */
.legalOverlay{
  position:fixed; inset:0;
  z-index:90;
  background: rgba(0,0,0,.55);
  opacity:0; pointer-events:none;
  transition: opacity .2s ease;
}
.legalOverlay.is-open{opacity:1; pointer-events:auto;}
.legalOverlay__panel{
  position:absolute; inset: 14px 14px 14px 14px;
  max-width: 980px;
  margin: 0 auto;
  background: rgba(7,11,28,.94);
  border:1px solid rgba(231,238,252,.12);
  border-radius: var(--radius2);
  box-shadow: var(--shadow);
  display:flex; flex-direction:column;
  overflow:hidden;
  animation: pop .22s ease both;
}
.legalOverlay__top{
  padding: 14px 14px 10px;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  border-bottom: 1px solid rgba(231,238,252,.10);
}
.legalOverlay__title{font-weight:900; letter-spacing:.2px}
.legalTabs{
  display:flex; gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(231,238,252,.10);
  background: rgba(255,255,255,.02);
}
.legalTabs__link{
  text-decoration:none;
  padding: 8px 12px;
  border-radius: 999px;
  border:1px solid rgba(231,238,252,.12);
  background: rgba(255,255,255,.03);
  color:rgba(231,238,252,.82);
}
.legalTabs__link.is-active{
  border-color: rgba(125,211,252,.30);
  background: linear-gradient(135deg, rgba(125,211,252,.14), rgba(167,139,250,.10));
}
.legalOverlay__body{
  padding: 16px 18px 18px;
  overflow:auto;
  scroll-behavior:smooth;
}
.legalDoc{color:rgba(231,238,252,.84); line-height:1.65}
.legalDoc h2{margin: 4px 0 8px; font-size: 26px}
.legalDoc h3{margin: 18px 0 8px; font-size: 16px}
.legalDoc p{margin: 8px 0}
.legalDoc ul{margin: 8px 0 8px 18px}
.legalDoc li{margin: 6px 0}
.legalContact{
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 18px;
  border:1px solid rgba(231,238,252,.12);
  background: rgba(255,255,255,.03);
}

/* Toast */
.toast{
  position:fixed;
  right: 16px;
  bottom: 16px;
  z-index: 120;
  max-width: min(420px, calc(100% - 32px));
  padding: 12px 14px;
  border-radius: 18px;
  border:1px solid rgba(231,238,252,.14);
  background: rgba(7,11,28,.92);
  box-shadow: var(--shadow);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .25s ease, transform .25s ease;
  pointer-events:none;
}
.toast.is-show{
  opacity: 1;
  transform: translateY(0);
}

/* Responsive */
@media (max-width: 980px){
  .gridA{grid-template-columns: 1fr; gap:18px}
  .cards{grid-template-columns: 1fr}
  .tri{grid-template-columns: 1fr}
  .triCard--raised{transform:none}
  .circleBlock{grid-template-columns: 1fr; text-align:left}
  .circleBlock__circle{width:240px; height:240px}
  .contactGrid{grid-template-columns: 1fr; gap:12px}
  .infoCards{grid-template-columns: 1fr 1fr}
  .footer__grid{grid-template-columns: 1fr 1fr}
  .brand{min-width:0}
}
@media (max-width: 740px){
  .topbar__inner .nav--center{display:none}
  .topbar__menuBtn{margin-left:auto; display:grid}
  .hero__meta{grid-template-columns: 1fr; gap:10px}
  .featureStack{grid-template-columns: 1fr}
  .form__row{grid-template-columns: 1fr}
  .infoCards{grid-template-columns: 1fr}
  .footer__grid{grid-template-columns: 1fr}
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  *{scroll-behavior:auto !important}
  .reviews__track{animation:none}
  .hud__ring,.hud__dot{animation:none}
  .featureCard,.svc,.review,.btn,.iconbtn{transition:none}
}

/* =========================
   FIX: About cards centered + content pushed down
   ========================= */
#about .gridA{
  grid-template-columns: 1fr; /* stack: cards row -> text row */
  gap: 26px;
}

/* your HTML currently has an empty media wrapper; hide it to avoid odd spacing */
#about .gridA__media{display:none;}

/* Center the 2x2 cards block and make it visually dominant */
#about .featureStack{
  grid-column: 1 / -1;
  justify-content: center;
  justify-items: stretch;
  max-width: 960px;
  margin: 6px auto 0;
  grid-template-columns: repeat(2, minmax(360px, 1fr));
  gap: 18px;
}

/* Push the copy lower so cards never "sit on top" of the heading */
#about .gridA__copy{
  grid-column: 1 / -1;
  margin-top: 22px;
}

/* Responsive: keep cards nice on smaller screens */
@media (max-width: 900px){
  #about .featureStack{grid-template-columns: 1fr; max-width: 720px;}
}

/* =========================
   FIX: Reviews movement is JS-driven (no CSS marquee)
   ========================= */
.reviews__track{
  animation: none !important;
}

/* =========================
   V2: About copy — less "wall of text"
   ========================= */
#about .gridA__copy{
  margin-top: 44px;          /* push content further down */
  max-width: 980px;          /* nicer line length */
  margin-left: auto;
  margin-right: auto;
}

/* Turn the "What you get" list into a 2-column grid on desktop */
#about .callout .check{
  list-style: none;
  padding-left: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 18px;
}
#about .callout .check li{
  position: relative;
  padding-left: 22px;
}
#about .callout .check li::before{
  content: "";
  position: absolute;
  left: 0; top: .6em;
  width: 10px; height: 10px;
  border-radius: 999px;
  background: rgba(125,211,252,.65);
  box-shadow: 0 0 0 5px rgba(125,211,252,.12);
}

/* Make micro stats horizontal on desktop to reduce vertical scrolling */
#about .microGrid{
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
#about .microStat{padding: 12px 14px;}
#about .microStat__v{font-size: 14px;}

@media (max-width: 900px){
  #about .callout .check{grid-template-columns: 1fr;}
  #about .microGrid{grid-template-columns: 1fr;}
}

/* =========================
   V2: Reviews — prevent flex shrinking + keep cards readable
   ========================= */
.reviews{overflow:hidden;} /* ensure clipping */
.review{
  flex: 0 0 340px;     /* fixed card width */
  min-width: 340px;
  max-width: 340px;
}
.reviews__track{
  gap: 14px;
}
@media (max-width: 740px){
  .review{flex-basis: 300px; min-width: 300px; max-width: 300px;}
}
/* === Sticky footer: футер всегда внизу экрана === */
html, body{
  height: 100%;
}

body{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* если у тебя есть <main> */
main{
  flex: 1 0 auto;
}

/* если main нет, но есть обёртка страницы (часто .page / .wrap / .site) —
   можно назначить flex:1 ей, а main оставить */
footer{
  margin-top: auto;
}