/* ============================================================
   CARLINE — styles
   Палитра: чёрный + лаймовый акцент (по фирменному стилю)
   ============================================================ */

:root{
  --bg:        #070809;
  --bg-2:      #0C0E10;
  --card:      #101315;
  --card-2:    #14181A;
  --line:      rgba(255,255,255,.09);
  --line-2:    rgba(255,255,255,.16);
  --txt:       #F1F3F2;
  --mut:       #969C9F;
  --acc:       #C7F82D;
  --acc-2:     #A8DE1F;
  --acc-soft:  rgba(199,248,45,.12);
  --acc-glow:  rgba(199,248,45,.25);
  --red:       #FF5C5C;
  --green:     #4ADE80;

  --r:   14px;
  --r-lg: 20px;
  --wrap: 1200px;
  --pad: clamp(18px, 4vw, 40px);

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "SF Pro Display",
          "Inter", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth; scroll-padding-top:86px; -webkit-text-size-adjust:100%}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }

body{
  margin:0;
  background:var(--bg);
  color:var(--txt);
  font-family:var(--font);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,svg{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button,input,select,textarea{font:inherit; color:inherit}

::selection{background:var(--acc); color:#0A0B0A}

.wrap{width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad)}
.wrap--narrow{max-width:900px}

/* Акцентное слово в заголовках. Имя НЕ .acc — этот класс занят FAQ-аккордеоном
   ниже (display:grid), и коллизия ломала переносы во всех заголовках. */
.accent{color:var(--acc)}

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--acc); color:#0A0B0A; padding:12px 18px; border-radius:0 0 10px 0; font-weight:700;
}
.skip:focus{left:0}

:focus-visible{outline:2px solid var(--acc); outline-offset:3px; border-radius:6px}

/* ---------- фирменные слэши // ---------- */
.slash{
  display:inline-block; width:16px; height:11px; position:relative; vertical-align:-1px;
}
.slash::before,.slash::after{
  content:""; position:absolute; top:0; width:4px; height:11px;
  background:var(--acc); transform:skewX(-20deg);
}
.slash::before{left:0}
.slash::after{left:8px}
.slash--lg{width:24px; height:16px}
.slash--lg::before,.slash--lg::after{width:6px; height:16px}
.slash--lg::after{left:12px}

/* ============================================================
   HEADER
   ============================================================ */
.hdr{
  position:sticky; top:0; z-index:100;
  background:rgba(7,8,9,.72);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.hdr.is-stuck{border-bottom-color:var(--line); background:rgba(7,8,9,.9)}

.hdr__in{display:flex; align-items:center; gap:24px; height:72px}

.logo{display:flex; align-items:center; gap:10px; flex-shrink:0}
.logo__mark{width:34px; color:var(--acc); display:block}
.logo__mark svg{width:100%; height:auto}
.logo__txt{
  font-size:23px; font-weight:800; letter-spacing:.04em; line-height:1;
}
.logo__txt i{color:var(--acc); font-style:normal; position:relative}
.logo__txt--big{font-size:30px}

.nav{display:flex; gap:26px; margin-left:auto; font-size:15px}
.nav a{color:var(--mut); transition:color .2s; position:relative; padding:4px 0}
.nav a::after{
  content:""; position:absolute; left:0; bottom:0; height:2px; width:0; background:var(--acc);
  transition:width .25s var(--ease);
}
.nav a:hover{color:var(--txt)}
.nav a:hover::after{width:100%}

.hdr__act{display:flex; align-items:center; gap:12px; margin-left:auto}
.nav + .hdr__act{margin-left:0}

.burger{
  display:none; width:42px; height:42px; border:1px solid var(--line); border-radius:11px;
  background:transparent; cursor:pointer; padding:0; position:relative;
}
.burger span{
  position:absolute; left:11px; width:20px; height:2px; background:var(--txt); border-radius:2px;
  transition:.28s var(--ease);
}
.burger span:nth-child(1){top:14px}
.burger span:nth-child(2){top:20px}
.burger span:nth-child(3){top:26px}
.burger[aria-expanded="true"] span:nth-child(1){top:20px; transform:rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){top:20px; transform:rotate(-45deg)}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:13px 24px; border-radius:11px; border:1px solid var(--acc);
  background:var(--acc); color:#0A0B0A; font-weight:700; font-size:15px; line-height:1;
  cursor:pointer; transition:.22s var(--ease); white-space:nowrap; position:relative; overflow:hidden;
}
.btn:hover{background:var(--acc-2); border-color:var(--acc-2); transform:translateY(-2px); box-shadow:0 10px 30px -10px var(--acc-glow)}
.btn:active{transform:translateY(0)}
.btn--sm{padding:10px 18px; font-size:14px}
.btn--lg{padding:17px 32px; font-size:16px}
.btn--full{width:100%}
.btn--ghost{background:transparent; color:var(--txt); border-color:var(--line-2)}
.btn--ghost:hover{background:rgba(255,255,255,.05); border-color:var(--acc); color:var(--acc); box-shadow:none}
.btn .ico{width:18px; height:18px; flex-shrink:0}

.btn__spin{
  display:none; width:17px; height:17px; border:2px solid rgba(0,0,0,.25);
  border-top-color:#0A0B0A; border-radius:50%; animation:spin .7s linear infinite;
}
.btn.is-load{pointer-events:none; opacity:.75}
.btn.is-load .btn__spin{display:block}
@keyframes spin{to{transform:rotate(360deg)}}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative; overflow:hidden; padding-top:clamp(56px,9vw,104px)}
.hero__in{position:relative; z-index:2; padding-bottom:clamp(48px,7vw,84px)}

.hero__glow{
  position:absolute; top:-320px; left:50%; transform:translateX(-50%);
  width:min(1100px,140vw); height:700px; pointer-events:none;
  background:radial-gradient(ellipse at center, rgba(199,248,45,.13), transparent 62%);
  filter:blur(20px);
}
.hero__lines{
  position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:repeating-linear-gradient(115deg, transparent 0 46px, rgba(199,248,45,.055) 46px 48px);
  -webkit-mask-image:linear-gradient(to left, #000, transparent 55%);
  mask-image:linear-gradient(to left, #000, transparent 55%);
}

.eyebrow{
  display:flex; align-items:center; gap:10px; margin:0 0 18px;
  font-size:13px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--mut);
}

.hero__h1{
  margin:0 0 22px;
  font-size:clamp(36px,7.2vw,78px); line-height:1.02; font-weight:800; letter-spacing:-.025em;
  text-transform:uppercase;
}
.hero__sub{
  margin:0 0 30px; max-width:620px; font-size:clamp(16px,2.1vw,19px); color:var(--mut);
}

.hero__chips{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:34px}
.chip{
  padding:8px 16px; border:1px solid var(--line); border-radius:100px;
  font-size:14px; color:var(--txt); background:rgba(255,255,255,.02);
}
.chip::before{content:""; display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--acc); margin-right:9px; vertical-align:1px}

.hero__cta{display:flex; flex-wrap:wrap; gap:14px}
.hero__note{margin:20px 0 0; font-size:13.5px; color:#6E7477}

/* бегущая строка городов */
.ticker{
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  background:rgba(255,255,255,.015); overflow:hidden; position:relative; z-index:2;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.ticker__row{
  display:flex; align-items:center; gap:22px; white-space:nowrap; padding:15px 0;
  font-size:14px; letter-spacing:.1em; text-transform:uppercase; color:#7E8487;
  width:max-content; animation:slide 42s linear infinite;
}
.ticker__row b{color:var(--acc); font-weight:800; letter-spacing:-.05em}
@keyframes slide{from{transform:translateX(0)} to{transform:translateX(-50%)}}
@media (prefers-reduced-motion: reduce){ .ticker__row{animation:none} }

/* ============================================================
   SECTIONS
   ============================================================ */
.sec{padding:clamp(64px,9vw,116px) 0; position:relative}
.sec--alt{background:var(--bg-2); border-block:1px solid var(--line)}

.sec__head{max-width:760px; margin-bottom:clamp(36px,5vw,56px)}
.h2{
  margin:0 0 16px; font-size:clamp(28px,5vw,52px); line-height:1.06;
  font-weight:800; letter-spacing:-.02em; text-transform:uppercase;
}
.sec__lead{margin:0; color:var(--mut); font-size:clamp(15px,1.8vw,18px); max-width:620px}
.sec__head .btn{margin-top:24px}

.grid{display:grid; gap:16px}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--wide{gap:18px}

/* ---------- карточки «что перевозим» ---------- */
.card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:28px 26px 30px; transition:.3s var(--ease); position:relative; overflow:hidden;
}
.card::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:radial-gradient(500px 180px at 50% -30%, rgba(199,248,45,.14), transparent 70%);
  opacity:0; transition:opacity .3s;
}
.card:hover{border-color:rgba(199,248,45,.4); transform:translateY(-4px)}
.card:hover::after{opacity:1}
.card__ico{
  display:flex; align-items:center; justify-content:center;
  width:54px; height:54px; border-radius:14px; margin-bottom:20px;
  background:var(--acc-soft); color:var(--acc); border:1px solid rgba(199,248,45,.2);
}
.card__ico svg{width:30px; height:30px}
.card h3{margin:0 0 10px; font-size:19px; font-weight:700; letter-spacing:-.01em}
.card p{margin:0; color:var(--mut); font-size:15px}

/* ---------- способы доставки ---------- */
.way{
  display:flex; gap:22px; align-items:flex-start;
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:30px 28px; transition:.3s var(--ease);
}
.way:hover{border-color:rgba(199,248,45,.35); background:var(--card-2)}
.way__ico{
  flex-shrink:0; width:72px; height:52px; color:var(--acc);
  display:flex; align-items:center; justify-content:center;
  background:var(--acc-soft); border:1px solid rgba(199,248,45,.18); border-radius:12px;
}
.way__ico svg{width:44px; height:auto}
.way__body h3{margin:0 0 9px; font-size:21px; font-weight:800; text-transform:uppercase; letter-spacing:.01em}
.way__body p{margin:0 0 14px; color:var(--mut); font-size:15px}

.tags{display:flex; flex-wrap:wrap; gap:7px; margin:0; padding:0; list-style:none}
.tags li{
  font-size:12.5px; padding:5px 11px; border-radius:7px;
  background:rgba(199,248,45,.08); color:var(--acc); border:1px solid rgba(199,248,45,.16);
}

/* ---------- шаги ---------- */
.steps{list-style:none; margin:0; padding:0; display:grid; gap:14px}
.step{
  position:relative; padding:26px 28px 26px 96px;
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg);
  transition:.3s var(--ease);
}
.step:hover{border-color:rgba(199,248,45,.32); transform:translateX(4px)}
.step__n{
  position:absolute; left:28px; top:24px;
  font-size:30px; font-weight:800; color:var(--acc); letter-spacing:-.03em; line-height:1;
  opacity:.9;
}
.step h3{margin:0 0 7px; font-size:19px; font-weight:700}
.step p{margin:0; color:var(--mut); font-size:15px; max-width:760px}

/* ---------- преимущества ---------- */
.feat{
  padding:28px 26px; border:1px solid var(--line); border-radius:var(--r-lg);
  background:linear-gradient(180deg, rgba(255,255,255,.028), rgba(255,255,255,0));
  transition:.3s var(--ease);
}
.feat:hover{border-color:rgba(199,248,45,.32)}
.feat h3{margin:0 0 12px; font-size:18px; font-weight:700; display:flex; align-items:baseline; gap:12px}
.feat__b{font-size:13px; font-weight:800; color:var(--acc); letter-spacing:.06em}
.feat p{margin:0; color:var(--mut); font-size:15px}

/* ---------- доп. услуги ---------- */
.dop{display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(28px,5vw,64px); align-items:center}
.dop__txt .btn{margin-top:26px}
.dop__list{
  list-style:none; margin:0; padding:0;
  border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; background:var(--card);
}
.dop__list li{
  display:flex; align-items:center; gap:14px; padding:17px 24px; font-size:16px;
  border-bottom:1px solid var(--line); transition:background .2s;
}
.dop__list li:last-child{border-bottom:none}
.dop__list li:hover{background:rgba(199,248,45,.05)}
.dop__list li::before{
  content:""; width:8px; height:8px; border-radius:2px; background:var(--acc); flex-shrink:0;
  transform:skewX(-20deg);
}

/* ---------- FAQ ---------- */
.acc{display:grid; gap:10px}
.acc__item{
  border:1px solid var(--line); border-radius:var(--r); background:var(--card); overflow:hidden;
  transition:border-color .25s;
}
.acc__item[open]{border-color:rgba(199,248,45,.3)}
.acc__item summary{
  list-style:none; cursor:pointer; padding:20px 56px 20px 24px; position:relative;
  font-size:17px; font-weight:600; transition:color .2s;
}
.acc__item summary::-webkit-details-marker{display:none}
.acc__item summary:hover{color:var(--acc)}
.acc__item summary::after{
  content:""; position:absolute; right:24px; top:50%; width:11px; height:11px;
  border-right:2px solid var(--acc); border-bottom:2px solid var(--acc);
  transform:translateY(-70%) rotate(45deg); transition:transform .25s var(--ease);
}
.acc__item[open] summary::after{transform:translateY(-25%) rotate(-135deg)}
.acc__body{padding:0 24px 22px}
.acc__body p{margin:0; color:var(--mut); font-size:15.5px}

/* ============================================================
   ФОРМА
   ============================================================ */
.sec--form{background:var(--bg-2); border-top:1px solid var(--line)}
.form-wrap{display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(28px,5vw,60px); align-items:start}

.form-side__list{list-style:none; margin:26px 0 0; padding:0; display:grid; gap:12px}
.form-side__list li{position:relative; padding-left:28px; color:var(--mut); font-size:15px}
.form-side__list li::before{
  content:""; position:absolute; left:0; top:8px; width:13px; height:7px;
  border-left:2px solid var(--acc); border-bottom:2px solid var(--acc); transform:rotate(-45deg);
}
.form-side__alt{margin-top:34px; padding-top:26px; border-top:1px solid var(--line)}
.form-side__alt p{margin:0 0 14px; color:var(--mut); font-size:15px}

.form{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:clamp(22px,3vw,34px); display:grid; gap:16px;
}
.f-row{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.f{display:grid; gap:8px}
.f__lbl{font-size:13.5px; color:var(--mut); font-weight:600; letter-spacing:.02em}
.f__lbl i{color:var(--acc); font-style:normal}
.f__in{
  width:100%; padding:14px 16px; border-radius:11px;
  background:var(--bg); border:1px solid var(--line); color:var(--txt);
  font-size:15.5px; transition:.2s var(--ease); appearance:none;
}
.f__in::placeholder{color:#5C6265}
.f__in:hover{border-color:var(--line-2)}
.f__in:focus{outline:none; border-color:var(--acc); box-shadow:0 0 0 3px rgba(199,248,45,.12)}
.f__in--area{resize:vertical; min-height:96px; font-family:inherit}
select.f__in{
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%23C7F82D' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 16px center; background-size:12px;
  padding-right:42px; cursor:pointer;
}
select.f__in option{background:var(--bg); color:var(--txt)}

.f.is-bad .f__in{border-color:var(--red)}
.f__err{font-size:12.5px; color:var(--red); min-height:0; display:none}
.f.is-bad .f__err{display:block}
.f__err--consent{display:none; margin-top:-8px}
.f__err--consent.is-on{display:block}

.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

.check{display:flex; gap:12px; align-items:flex-start; cursor:pointer; margin-top:4px}
.check input{position:absolute; opacity:0; width:0; height:0}
.check__box{
  flex-shrink:0; width:20px; height:20px; border:1px solid var(--line-2); border-radius:6px;
  margin-top:2px; position:relative; transition:.2s var(--ease); background:var(--bg);
}
.check__box::after{
  content:""; position:absolute; left:6px; top:2.5px; width:6px; height:11px;
  border-right:2px solid #0A0B0A; border-bottom:2px solid #0A0B0A;
  transform:rotate(45deg) scale(0); transition:transform .18s var(--ease);
}
.check input:checked + .check__box{background:var(--acc); border-color:var(--acc)}
.check input:checked + .check__box::after{transform:rotate(45deg) scale(1)}
.check input:focus-visible + .check__box{outline:2px solid var(--acc); outline-offset:3px}
.check__txt{font-size:13.5px; color:var(--mut); line-height:1.5}
.check__txt a{color:var(--acc); text-decoration:underline; text-underline-offset:2px}
.check__txt i{color:var(--acc); font-style:normal}
.check.is-bad .check__box{border-color:var(--red)}

.form__note{margin:0; font-size:12.5px; color:#666C6F; text-align:center}

.form__msg{display:none; padding:16px 18px; border-radius:11px; font-size:15px}
.form__msg.is-ok{display:block; background:rgba(74,222,128,.1); border:1px solid rgba(74,222,128,.3); color:var(--green)}
.form__msg.is-err{display:block; background:rgba(255,92,92,.09); border:1px solid rgba(255,92,92,.3); color:#FF9A9A}
.form__msg a{color:inherit; text-decoration:underline; font-weight:600}

/* ============================================================
   FOOTER
   ============================================================ */
.ftr{background:var(--bg); border-top:1px solid var(--line); padding:clamp(48px,6vw,72px) 0 32px}
.ftr__top{display:grid; grid-template-columns:1.4fr .8fr 1fr; gap:40px; padding-bottom:44px}
.ftr__slog{margin:16px 0 0; color:var(--mut); font-size:15px}
.ftr__slash{
  margin:18px 0 0; display:flex; align-items:center; gap:12px;
  font-size:13px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:#7E8487;
}
.ftr h3{margin:0 0 18px; font-size:13px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--txt)}
.ftr__nav{display:flex; flex-direction:column; gap:11px}
.ftr__nav a{color:var(--mut); font-size:15px; transition:color .2s; width:fit-content}
.ftr__nav a:hover{color:var(--acc)}
.ftr__tg{
  display:inline-flex; align-items:center; gap:9px; color:var(--acc); font-size:17px; font-weight:700;
  transition:opacity .2s;
}
.ftr__tg:hover{opacity:.8}
.ftr__tg .ico{width:20px; height:20px}
.ftr__hint{margin:14px 0 20px; color:var(--mut); font-size:14px}

.ftr__legal{border-top:1px solid var(--line); padding-top:26px}
.ftr__legal--bare{border-top:none; padding-top:0}
.ftr__legal > p{margin:0 0 22px; font-size:12.5px; color:#63696C; max-width:900px; line-height:1.65}
.ftr__bottom{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:13.5px; color:#63696C}
.ftr__bottom a{transition:color .2s}
.ftr__bottom a:hover{color:var(--acc)}

/* ============================================================
   ПРАВОВЫЕ СТРАНИЦЫ
   ============================================================ */
.doc{padding-top:clamp(8px,2vw,24px)}
.doc h2{
  margin:44px 0 14px; font-size:clamp(19px,2.4vw,23px); font-weight:800;
  letter-spacing:-.01em; scroll-margin-top:96px;
}
.doc p, .doc li{color:var(--mut); font-size:16px; line-height:1.72}
.doc p{margin:0 0 14px}
.doc ul{margin:0 0 14px; padding-left:22px}
.doc li{margin-bottom:7px}
/* :not(.btn) — иначе текст кнопки покрасится в цвет её же фона */
.doc a:not(.btn){color:var(--acc); text-decoration:underline; text-underline-offset:3px}
.doc__date{font-size:14px; color:#63696C; margin-bottom:8px}
.doc__back{margin-top:48px; padding-top:32px; border-top:1px solid var(--line)}

/* плавающая кнопка Telegram */
.fab{
  position:fixed; right:20px; bottom:20px; z-index:90;
  width:56px; height:56px; border-radius:50%;
  background:var(--acc); color:#0A0B0A;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 32px -8px var(--acc-glow); transition:.25s var(--ease);
}
.fab svg{width:26px; height:26px; margin-right:2px}
.fab:hover{transform:scale(1.08)}

/* ============================================================
   REVEAL-АНИМАЦИЯ
   ============================================================ */
.reveal{opacity:0; transform:translateY(22px); transition:opacity .6s var(--ease), transform .6s var(--ease)}
.reveal.is-in{opacity:1; transform:none}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1; transform:none; transition:none}
}

/* ============================================================
   АДАПТИВ
   ============================================================ */
@media (max-width:1020px){
  .grid--3{grid-template-columns:repeat(2,1fr)}
  .ftr__top{grid-template-columns:1fr 1fr; gap:32px}
  .ftr__brand{grid-column:1/-1}
}

@media (max-width:900px){
  .nav{
    position:fixed; inset:72px 0 auto; flex-direction:column; gap:0;
    background:rgba(7,8,9,.98); backdrop-filter:blur(16px);
    border-bottom:1px solid var(--line); padding:8px var(--pad) 22px;
    transform:translateY(-120%); transition:transform .35s var(--ease); margin:0;
  }
  .nav.is-open{transform:translateY(0)}
  .nav a{padding:15px 0; border-bottom:1px solid var(--line); font-size:17px; color:var(--txt)}
  .nav a::after{display:none}
  .burger{display:block}
  .hdr__act{margin-left:auto}
  .form-wrap{grid-template-columns:1fr}
  .dop{grid-template-columns:1fr}
}

@media (max-width:720px){
  .grid--3,.grid--2{grid-template-columns:1fr}
  .f-row{grid-template-columns:1fr}
  .way{flex-direction:column; gap:18px}
  .step{padding:24px 22px 24px 22px}
  .step__n{position:static; display:block; margin-bottom:8px; font-size:26px}
  .hero__chips .chip{font-size:13px; padding:7px 13px}
  .hero__cta .btn{width:100%}
  .fab{width:52px; height:52px; right:14px; bottom:14px}
  .ftr__top{grid-template-columns:1fr}
  .ftr__brand{grid-column:auto}
}

@media (max-width:420px){
  .hdr__act .btn--sm{display:none}
  .logo__txt{font-size:20px}
}