/* =====================================================
   iamSerajul. One page. Light, white, no menu.
   ===================================================== */
:root{
  color-scheme: light;

  --bg:      #FFFFFF;
  --bg-2:    #F6F7F9;
  --line:    #E7E9EF;
  --line-2:  #D2D6E0;

  --text:    #0B0D12;
  --text-2:  #565D6B;
  --text-3:  #868D9B;

  --wa:      #25D366;
  --wa-dark: #17B854;
  --wa-soft: #EAFBF1;

  --accent:  #1F5AF6;
  --brand-red: #D92D20;
  --warm:      #FF7A3C;
  --warm-2:    #FFB627;
  --amber:   #B26A00;
  --amber-soft:#FFF6E6;

  --r:  16px;
  --r-s: 10px;
  --r-l: 22px;

  --sh-1: 0 1px 2px rgba(11,13,18,.05), 0 8px 24px rgba(11,13,18,.05);
  --sh-2: 0 2px 6px rgba(11,13,18,.05), 0 20px 46px rgba(11,13,18,.09);

  --gut: clamp(20px, 5vw, 40px);
  --maxw: 1160px;

  --f: "Geist", "Manrope", "Helvetica Neue", Arial, sans-serif;
  --f-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; position:relative;
  background:var(--bg);
  color:var(--text);
  font-family:var(--f);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
/* one soft wash across the top of the page, behind the header too */
body::before{
  content:""; position:absolute; top:0; left:0; right:0; height:760px; z-index:0;
  background:linear-gradient(180deg, #EFF4FF 0%, rgba(255,255,255,0) 100%);
  pointer-events:none;
}
.hdr, main, .foot, .mobar{ position:relative; z-index:1; }
.hdr{ z-index:50; }
.mobar{ z-index:55; }

img,svg{ max-width:100%; display:block; }
button{ font:inherit; color:inherit; }
a{ color:inherit; }
p{ margin:0; }
h1,h2,h3,h4{ margin:0; font-weight:800; letter-spacing:-.035em; line-height:1.03; text-wrap:balance; }
h1{ font-size:clamp(2.4rem, 1.1rem + 4.5vw, 4.3rem); letter-spacing:-.045em; }
h2{ font-size:clamp(1.95rem, 1.15rem + 3.2vw, 3.3rem); letter-spacing:-.04em; }
h3{ font-size:clamp(1.14rem, 1rem + .68vw, 1.46rem); letter-spacing:-.025em; line-height:1.16; }
h4{ font-size:1.02rem; letter-spacing:-.015em; font-weight:700; }

:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:6px; }
.skip{ position:absolute; left:12px; top:-60px; z-index:200; background:var(--text); color:#fff; padding:10px 16px; border-radius:8px; text-decoration:none; font-weight:600; transition:top .18s ease; }
.skip:focus{ top:12px; }

.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut); }
.sec{ padding-block:clamp(54px, 5.6vw, 92px); position:relative; scroll-margin-top:86px; }
.sec--tint{ background:var(--bg-2); border-block:1px solid var(--line); }
.stack{ display:flex; flex-direction:column; }

.lbl{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--f-mono); font-size:.7rem; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase; color:var(--text-3);
}
.lbl::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--wa); }
.lede{ font-size:clamp(1.02rem,.97rem + .36vw,1.2rem); color:var(--text-2); max-width:58ch; }
.muted{ color:var(--text-2); }
.small{ font-size:.88rem; }

/* ---------- buttons ---------- */
.btn{
  --bbg:var(--wa); --bfg:#fff; --bbd:var(--wa);
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 26px; border:1px solid var(--bbd); border-radius:999px;
  background:var(--bbg); color:var(--bfg);
  font-weight:700; font-size:.98rem; letter-spacing:-.012em;
  text-decoration:none; cursor:pointer; white-space:nowrap;
  transition:transform .16s cubic-bezier(.2,.8,.3,1), box-shadow .2s ease, background .2s ease, border-color .2s ease, color .2s ease;
  box-shadow:0 6px 20px rgba(37,211,102,.26);
}
.btn:hover{ --bbg:var(--wa-dark); --bbd:var(--wa-dark); transform:translateY(-2px); box-shadow:0 12px 30px rgba(37,211,102,.34); }
.btn:active{ transform:translateY(0); }
.btn svg{ flex:none; }
.btn--ghost{ --bbg:#fff; --bfg:var(--text); --bbd:var(--line-2); box-shadow:none; font-weight:600; }
.btn--ghost:hover{ --bbg:#fff; --bfg:var(--text); --bbd:var(--text); transform:translateY(-2px); box-shadow:var(--sh-1); }
.btn--dark{ --bbg:var(--text); --bfg:#fff; --bbd:var(--text); box-shadow:none; }
.btn--dark:hover{ --bbg:#000; --bbd:#000; box-shadow:var(--sh-1); }
.btn--sm{ padding:11px 18px; font-size:.9rem; }
.btn--lg{ padding:17px 32px; font-size:1.04rem; }
.btn--block{ width:100%; }
.btn{ max-width:100%; }

/* ---------- cards ---------- */
.card{
  position:relative;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r-l);
  box-shadow:var(--sh-1);
}

/* ---------- header ---------- */
.hdr{
  position:sticky; top:0; z-index:50; background:transparent;
  transition:background .25s ease, box-shadow .25s ease, border-color .25s ease;
  border-bottom:1px solid transparent;
}
.hdr.is-stuck{ background:rgba(255,255,255,.94); backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px); border-bottom-color:var(--line); box-shadow:0 6px 24px rgba(11,13,18,.05); }
.hdr__bar{
  position:relative; width:100%; max-width:var(--maxw); margin-inline:auto;
  padding-inline:var(--gut); display:flex; align-items:center;
  height:72px; transition:height .25s ease;
}
.hdr.is-stuck .hdr__bar{ height:64px; }
.hdr__prog{ position:absolute; left:0; right:0; bottom:-1px; height:2px; overflow:hidden; opacity:0; transition:opacity .3s ease; }
.hdr.is-stuck .hdr__prog{ opacity:1; }
.hdr__prog::after{ content:""; position:absolute; inset:0; transform:scaleX(var(--p,0)); transform-origin:left center;
  background:linear-gradient(90deg, rgba(11,13,18,.28), var(--text)); }

.brand{ display:inline-flex; align-items:center; gap:0; flex:none; margin-right:clamp(26px,3.4vw,52px);
  font-weight:800; font-size:1.04rem; letter-spacing:-.045em; text-decoration:none; color:var(--text); }
.brand__mark{ width:26px; height:26px; border-radius:8px; position:relative; margin-right:10px; flex:none;
  background:conic-gradient(from 0deg, var(--wa), #A9E34B 24%, var(--warm-2) 48%, var(--warm) 70%, var(--wa));
  animation:markspin 9s linear infinite; }
.brand__mark::after{ content:""; position:absolute; inset:3.2px; border-radius:5px; background:#fff; }
.brand b{ color:rgba(11,13,18,.5); font-weight:500; }
.brand span{ color:var(--text); }
@keyframes markspin{ to{ transform:rotate(360deg) } }

.nav{ display:flex; align-items:center; gap:clamp(20px,2.2vw,30px); margin-right:auto; }
.nav a{ position:relative; font-size:.875rem; font-weight:500; letter-spacing:-.005em; color:var(--text-2);
  text-decoration:none; padding:4px 0; transition:color .16s ease; white-space:nowrap; }
.nav a:hover, .nav a[aria-current="page"]{ color:var(--text); }
.nav a[aria-current="page"]::after{ content:""; position:absolute; left:0; right:0; bottom:-2px; height:1.5px; background:var(--text); }

.hdr__cta{
  flex:none; display:inline-flex; align-items:center; gap:9px;
  background:var(--text); color:#fff; border:0; border-radius:8px;
  padding:11px 18px; font-size:.845rem; font-weight:600; letter-spacing:-.01em; text-decoration:none;
  box-shadow:none; transition:background .18s ease, transform .18s ease;
}
.hdr__cta:hover{ background:#1C2330; transform:none; box-shadow:none; }
.nav .hdr__cta{ display:none; }
.hdr__cta svg{ width:15px; height:15px; color:var(--wa); }

.burger{ display:none; width:40px; height:40px; margin-left:16px; flex:none; border:1px solid var(--line);
  border-radius:9px; background:rgba(255,255,255,.7); place-items:center; cursor:pointer; }
.burger i{ display:block; position:relative; width:16px; height:1.6px; border-radius:2px; background:var(--text); transition:transform .24s ease, background .18s ease; }
.burger i::before, .burger i::after{ content:""; position:absolute; left:0; width:16px; height:1.6px; border-radius:2px; background:var(--text); transition:transform .24s ease, top .18s ease; }
.burger i::before{ top:-5.5px; } .burger i::after{ top:5.5px; }
.hdr.is-open .burger i{ background:transparent; }
.hdr.is-open .burger i::before{ top:0; transform:rotate(45deg); }
.hdr.is-open .burger i::after{ top:0; transform:rotate(-45deg); }

@media (max-width: 860px){
  .burger{ display:grid; }
  .hdr__bar{ height:64px; }
  .hdr{ background:rgba(255,255,255,.9); backdrop-filter:blur(12px); border-bottom-color:var(--line); }
  .brand{ margin-right:auto; }
  .nav{ position:absolute; top:100%; left:0; right:0; z-index:5; flex-direction:column; align-items:stretch; gap:0;
    margin:0; padding:4px var(--gut) 16px; background:#fff; border-bottom:1px solid var(--line);
    box-shadow:0 18px 34px rgba(11,13,18,.09);
    opacity:0; visibility:hidden; transform:translateY(-10px);
    transition:opacity .2s ease, transform .24s cubic-bezier(.2,.8,.2,1), visibility .2s; }
  .hdr.is-open .nav{ opacity:1; visibility:visible; transform:translateY(0); }
  .nav a{ padding:14px 2px; font-size:1rem; border-bottom:1px solid var(--line); }
  .nav a[aria-current="page"]::after{ display:none; }
  .hdr__bar > .hdr__cta{ display:none; }
  .nav .hdr__cta{ display:inline-flex; justify-content:center; margin-top:16px; padding:13px 18px; font-size:.95rem; }
}
@media (max-width: 430px){ .brand{ font-size:.96rem; } }

/* ---------- section heading ---------- */
.shead{ display:grid; gap:16px; margin-bottom:clamp(30px,3.6vw,50px); max-width:66ch; }
.shead--wide{ max-width:none; }
.shead--wide h2{ text-wrap:nowrap; }
@media (max-width: 820px){ .shead--wide h2{ text-wrap:balance; } }

/* ---------- footer ---------- */
.foot{
  background:var(--text); color:#A8ADBA;
  padding-top:clamp(46px, 5vw, 78px);
  overflow:hidden;
}
.foot .brand{ color:#fff; }
.foot .brand b{ color:rgba(255,255,255,.5); }
.foot .brand span{ color:#fff; }
.foot .brand__mark::after{ background:var(--text); }
.foot a:not(.btn){ color:#A8ADBA; text-decoration:none; transition:color .18s ease; }
.foot a:not(.btn):hover{ color:#fff; }

.foot__top{
  display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(28px,4vw,64px);
}
.foot__say{ font-size:.95rem; color:#A8ADBA; max-width:34ch; margin-top:15px; }
.foot__cta{ margin-top:22px; display:inline-flex; }
.foot__links{ display:flex; flex-wrap:wrap; gap:9px; margin-top:16px; }
.foot__links a{
  display:inline-flex; align-items:center; gap:9px; font-size:.86rem;
  border:1px solid rgba(255,255,255,.15); border-radius:999px; padding:8px 14px 8px 12px;
  transition:color .18s ease, border-color .18s ease, background .18s ease;
}
.foot__links a:hover{ border-color:rgba(255,255,255,.4); background:rgba(255,255,255,.05); }
.foot__links svg{ flex:none; opacity:.8; }
.foot__links a:hover svg{ opacity:1; }
.foot h4{
  font-family:var(--f-mono); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase;
  color:#7B8291; margin-bottom:15px; font-weight:400;
}
.foot__list{ display:grid; gap:11px; font-size:.95rem; color:#D2D6DF; }
.foot__list i{ font-style:normal; display:block; font-size:.82rem; color:#7B8291; margin-top:2px; }
.foot__tags{ display:flex; flex-wrap:wrap; gap:7px; }
.foot__tags span{
  font-size:.78rem; color:#A8ADBA;
  border:1px solid rgba(255,255,255,.15); border-radius:999px; padding:5px 11px;
}
.foot__tags em{ font-style:normal; font-size:.78rem; color:#7B8291; padding:5px 2px; }

.foot__fine{
  margin-top:clamp(30px,3.4vw,46px); padding-top:22px;
  border-top:1px solid rgba(255,255,255,.13);
  display:flex; flex-wrap:wrap; gap:8px 24px; justify-content:space-between; align-items:center;
  font-family:var(--f-mono); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:#7B8291;
}
.foot__up{ display:inline-flex; align-items:center; gap:8px; color:#7B8291; }
.foot__up:hover{ color:#fff; }
.foot__up i{
  font-style:normal; width:7px; height:7px; display:block;
  border-left:1.6px solid currentColor; border-top:1.6px solid currentColor; transform:rotate(45deg);
}

/* the oversized wordmark: letters spread edge to edge, trimmed by the bottom */
.foot__word{
  display:flex; justify-content:space-between; align-items:flex-end;
  margin-top:clamp(22px,2.4vw,32px); margin-bottom:-.30em;
  font-weight:800; line-height:.82; letter-spacing:0;
  font-size:min(13.8vw, 12.5rem);
  color:rgba(255,255,255,.05);
  white-space:nowrap; user-select:none; pointer-events:none;
}
.foot__word span{ display:block; }
.foot__word .r{ color:rgba(255,255,255,.085); }

/* ---------- custom cursor, shaped like the logo mark ---------- */

.cursor{ display:none; }
@media (hover:hover) and (pointer:fine){
  html, body, a, button, .qa__q, .btn{ cursor:none; }
  .cursor{
    display:block; position:fixed; left:0; top:0; z-index:200;
    width:22px; height:22px; margin:-11px 0 0 -11px;
    pointer-events:none; opacity:0;
    transition:opacity .2s ease, width .18s ease, height .18s ease, margin .18s ease;
    will-change:transform;
  }
  .cursor.is-on{ opacity:1; }
  .cursor.is-over{ width:30px; height:30px; margin:-15px 0 0 -15px; }
  .cursor.is-down{ width:18px; height:18px; margin:-9px 0 0 -9px; }
  .cursor span{
    display:block; width:100%; height:100%; position:relative;
    border-radius:32%;
    background:conic-gradient(from 0deg, var(--wa), #A9E34B 24%, var(--warm-2) 48%, var(--warm) 70%, var(--wa));
    animation:markspin 9s linear infinite;
    box-shadow:0 2px 10px rgba(11,13,18,.22);
  }
  .cursor span::after{
    content:""; position:absolute; inset:26%; border-radius:30%; background:#fff;
  }
}

/* ---------- reveal ---------- */
.rev{ opacity:1; transform:none; }
.js .rev.is-pending{ opacity:0; transform:translateY(16px); }
.js .rev.is-in{ opacity:1; transform:none; transition:opacity .55s ease, transform .55s cubic-bezier(.2,.75,.3,1); }

@media (max-width: 720px){
  .mobar{ display:flex; }
  .foot__word{ display:none; }
  body{ padding-bottom:76px; }
  .hero__cta .btn{ width:100%; }
  .svc__list,.plan__grid{ grid-template-columns:1fr; }
  .qa__a p{ padding-right:10px; }
}
@media (max-width: 860px){
  .foot__top{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .foot__brand{ grid-column:1 / -1; }
}
@media (max-width: 520px){
  body{ font-size:16.5px; }
  .foot__top{ grid-template-columns:minmax(0,1fr); gap:30px; }
  .shot{ width:min(86%, 290px); margin-top:24px; }
  .why__nums{ grid-template-columns:minmax(0,1fr); gap:14px; }
  .steps{ grid-template-columns:minmax(0,1fr); }
  .final{ padding:30px 18px; }
  .final__cta{ width:100%; }
  .final__cta .btn{ width:100%; white-space:normal; padding-inline:18px; }
  .svc__top{ flex-wrap:wrap; }
  .svc__tag{ margin-left:0; }
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation:none !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .js .rev.is-pending{ opacity:1; transform:none; }
}

/* ---------- blog ---------- */
.blog__hd{ padding:clamp(44px,5vw,76px) 0 clamp(20px,2.4vw,30px); }
.blog__hd h1{ font-size:clamp(2.1rem,1.3rem + 2.6vw,3.2rem); margin-top:16px; max-width:18ch; }
.blog__hd .lede{ margin-top:18px; }
.posts{ display:grid; gap:0; border-top:1px solid var(--line); }
.post{
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px 30px; align-items:center;
  padding:clamp(22px,2.6vw,32px) clamp(16px,1.8vw,24px);
  margin-inline:calc(-1 * clamp(16px,1.8vw,24px));
  border-bottom:1px solid var(--line); border-radius:14px;
  text-decoration:none; transition:background .2s ease;
}
.post:hover{ background:var(--bg-2); }
.post__meta{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-bottom:9px; }
.post__cat{
  font-family:var(--f-mono); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase;
  border:1px solid var(--line); border-radius:999px; padding:4px 10px; color:var(--text-3);
}
.post__cat--site{ color:#2C5BD8; border-color:#DCE6FF; background:#EEF3FF; }
.post__cat--app{ color:#8A5400; border-color:#F0DFBE; background:var(--amber-soft); }
.post__date{ font-family:var(--f-mono); font-size:.68rem; letter-spacing:.1em; color:var(--text-3); }
.post h2{ font-size:clamp(1.2rem,1rem + .9vw,1.62rem); letter-spacing:-.03em; line-height:1.14; }
.post p{ color:var(--text-2); font-size:.96rem; margin-top:9px; max-width:62ch; }
.post__go{
  width:42px; height:42px; border-radius:50%; border:1px solid var(--line); display:grid; place-items:center;
  color:var(--text-2); flex:none; transition:border-color .2s ease, background .2s ease, color .2s ease, transform .2s ease;
}
.post:hover .post__go{ border-color:var(--text); background:var(--text); color:#fff; transform:translateX(3px); }

/* article */
.art{ padding:clamp(34px,4vw,60px) 0 clamp(40px,5vw,80px); }
.art__hd{ max-width:62ch; }
.art__hd h1{ font-size:clamp(2rem,1.3rem + 2.4vw,3rem); margin-top:16px; letter-spacing:-.04em; }
.art__sub{ font-size:clamp(1.02rem,.98rem + .3vw,1.18rem); color:var(--text-2); margin-top:18px; }
.art__meta{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; margin-top:24px;
  padding-top:18px; border-top:1px solid var(--line); font-family:var(--f-mono); font-size:.68rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--text-3); }
.art__body{ max-width:66ch; margin-top:clamp(30px,3.4vw,46px); }
.art__body h2{ font-size:clamp(1.35rem,1.1rem + 1.1vw,1.85rem); letter-spacing:-.03em; margin:clamp(34px,3.4vw,48px) 0 14px; }
.art__body h3{ font-size:1.1rem; margin:28px 0 10px; }
.art__body p{ font-size:1.02rem; line-height:1.72; color:var(--text-2); margin-bottom:18px; }
.art__body p strong, .art__body li strong{ color:var(--text); font-weight:700; }
.art__body ul, .art__body ol{ margin:0 0 20px; padding-left:0; list-style:none; display:grid; gap:11px; }
.art__body ul li{ position:relative; padding-left:26px; font-size:1.02rem; line-height:1.65; color:var(--text-2); }
.art__body ul li::before{ content:""; position:absolute; left:2px; top:.62em; width:7px; height:7px; border-radius:2px; background:var(--wa); }
.art__body ol{ counter-reset:st; }
.art__body ol li{ counter-increment:st; position:relative; padding-left:34px; font-size:1.02rem; line-height:1.65; color:var(--text-2); }
.art__body ol li::before{ content:counter(st); position:absolute; left:0; top:.26em; font-family:var(--f-mono); font-size:.76rem; color:var(--text-3); }
.art__body a{ color:var(--wa-dark); text-decoration:none; border-bottom:1px solid rgba(23,184,84,.35); }
.art__body a:hover{ border-bottom-color:var(--wa-dark); }
.pull{ border-left:3px solid var(--text); padding:4px 0 4px 20px; margin:28px 0; }
.pull p{ font-size:1.14rem; line-height:1.5; color:var(--text); font-weight:600; margin:0; letter-spacing:-.02em; }
.stat{ border:1px solid var(--line); border-radius:var(--r); background:var(--bg-2); padding:20px 22px; margin:28px 0; }
.stat b{ display:block; font-size:clamp(1.5rem,1.2rem + 1.4vw,2.1rem); letter-spacing:-.04em; line-height:1.05; }
.stat p{ margin:8px 0 0; font-size:.94rem; }
.stat cite{ display:block; margin-top:10px; font-style:normal; font-size:.8rem; color:var(--text-3); }
.stat cite a{ color:var(--text-3); border-bottom-color:rgba(11,13,18,.18); }
.srcs{ max-width:66ch; margin-top:clamp(36px,4vw,56px); padding-top:24px; border-top:1px solid var(--line); }
.srcs h2{ font-family:var(--f-mono); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--text-3); font-weight:400; margin-bottom:14px; }
.srcs ol{ display:grid; gap:10px; list-style:none; padding:0; margin:0; counter-reset:sc; }
.srcs li{ counter-increment:sc; position:relative; padding-left:26px; font-size:.88rem; color:var(--text-3); line-height:1.5; }
.srcs li::before{ content:counter(sc); position:absolute; left:0; top:.14em; font-family:var(--f-mono); font-size:.7rem; }
.srcs a{ color:var(--text-2); text-decoration:none; border-bottom:1px solid var(--line-2); }
.srcs a:hover{ color:var(--text); }
.more{ margin-top:clamp(40px,4.4vw,64px); padding-top:26px; border-top:1px solid var(--line); }
.more h2{ font-family:var(--f-mono); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--text-3); font-weight:400; margin-bottom:16px; }
.more__grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.more a{ display:block; border:1px solid var(--line); border-radius:var(--r); padding:18px 20px; text-decoration:none; transition:border-color .2s ease, background .2s ease; }
.more a:hover{ border-color:var(--line-2); background:var(--bg-2); }
.more strong{ display:block; font-size:1rem; letter-spacing:-.02em; line-height:1.25; }
.more span{ display:block; margin-top:7px; font-size:.86rem; color:var(--text-3); }
@media (max-width: 620px){
  .post{ grid-template-columns:minmax(0,1fr); }
  .post__go{ display:none; }
  .more__grid{ grid-template-columns:minmax(0,1fr); }
}
.back{ display:inline-flex; align-items:center; gap:8px; font-size:.84rem; color:var(--text-2); text-decoration:none; margin-bottom:22px; }
.back:hover{ color:var(--text); }
.back svg{ flex:none; transition:transform .18s ease; }
.back:hover svg{ transform:translateX(-3px); }