:root{
  --bg:#040604;
  --bg-soft:#080c08;
  --panel:#0b100b;
  --panel-2:#101610;
  --line:#1b2b1d;
  --line-hot:#2d5632;
  --green:#62ff72;
  --green-2:#22c55e;
  --green-dark:#0b7a2b;
  --text:#f0f5f0;
  --muted:#8b9a8d;
  --shadow:0 0 40px rgba(98,255,114,.10);
  --font-display:"Chakra Petch",system-ui,sans-serif;
  --font-body:"Inter",system-ui,sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  overflow-x:hidden;
}
body::selection{background:var(--green);color:#041006}
a{color:inherit;text-decoration:none}
button,a{ -webkit-tap-highlight-color:transparent}
canvas#matrix{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  z-index:-3;
  opacity:.18;
}
.noise{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:50;
  opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E");
}
.scanline{
  position:fixed;
  left:0;right:0;
  top:-20%;
  height:120px;
  pointer-events:none;
  z-index:49;
  opacity:.08;
  background:linear-gradient(transparent,rgba(98,255,114,.35),transparent);
  animation:scan 10s linear infinite;
}
@keyframes scan{to{transform:translateY(120vh)}}

.site-header{
  position:fixed;
  top:0;left:0;right:0;
  z-index:40;
  height:78px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 clamp(22px,4vw,72px);
  border-bottom:1px solid rgba(98,255,114,.12);
  background:rgba(4,6,4,.74);
  backdrop-filter:blur(18px);
}
.brand{display:flex;align-items:center;gap:12px;font-family:var(--font-display);font-weight:700;letter-spacing:.16em}
.brand-mark{
  width:38px;height:38px;
  display:grid;place-items:center;
  border:1px solid var(--green);
  color:var(--green);
  box-shadow:inset 0 0 18px rgba(98,255,114,.08),0 0 20px rgba(98,255,114,.08);
  transform:skew(-8deg);
}
.brand-mark.small{width:30px;height:30px;font-size:.8rem}
.brand-name{font-size:1rem}
.nav{display:flex;gap:32px;font-family:var(--font-display);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase}
.nav a{color:var(--muted);transition:.2s ease}
.nav a:hover{color:var(--green)}
.header-cta{
  font:600 .75rem var(--font-display);
  letter-spacing:.15em;
  color:var(--green);
  padding:10px 14px;
  border:1px solid var(--line-hot);
  transition:.2s ease;
}
.header-cta:hover{background:var(--green);color:#041006}

.hero{
  min-height:100svh;
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(360px,.85fr);
  align-items:center;
  gap:6vw;
  padding:130px clamp(22px,6vw,110px) 80px;
  overflow:hidden;
}
.hero::before{
  content:"";
  position:absolute;
  width:46vw;height:46vw;
  right:-10vw;top:15vh;
  border-radius:50%;
  background:radial-gradient(circle,rgba(98,255,114,.12),rgba(98,255,114,0) 68%);
  filter:blur(12px);
  pointer-events:none;
}
.hero-grid{
  position:absolute;inset:0;z-index:-2;
  background-image:
    linear-gradient(rgba(98,255,114,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(98,255,114,.035) 1px,transparent 1px);
  background-size:48px 48px;
  mask-image:linear-gradient(to bottom,black 40%,transparent 100%);
}

.eyebrow,.kicker{
  font:600 .73rem var(--font-display);
  letter-spacing:.19em;
  color:var(--green);
  text-transform:uppercase;
}
.eyebrow{display:flex;align-items:center;gap:10px;margin-bottom:22px}
.status-dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--green);
  box-shadow:0 0 14px var(--green);
  animation:pulse 1.8s ease-in-out infinite;
}
@keyframes pulse{50%{opacity:.35;box-shadow:0 0 4px var(--green)}}
.hero h1{
  margin:0;
  font:700 clamp(4.1rem,9vw,9.2rem)/.78 var(--font-display);
  letter-spacing:-.065em;
  text-transform:uppercase;
}
.hero h1 span{display:block}
.hero h1 .muted-line{color:#263028}
.hero h1 .glitch{color:var(--green);position:relative;text-shadow:0 0 28px rgba(98,255,114,.16)}
.hero h1 .glitch:hover::after{
  content:attr(data-text);
  position:absolute;left:3px;top:1px;
  color:white;opacity:.25;
  clip-path:inset(40% 0 35% 0);
}
.hero-text{
  max-width:680px;
  color:#a7b3a8;
  font-size:clamp(1rem,1.4vw,1.15rem);
  line-height:1.8;
  margin:34px 0 0;
}
.hero-text strong{color:var(--text)}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.btn{
  min-height:52px;
  display:inline-flex;align-items:center;justify-content:center;gap:18px;
  padding:0 22px;
  font:600 .8rem var(--font-display);
  letter-spacing:.1em;
  text-transform:uppercase;
  border:1px solid transparent;
  transition:.25s ease;
}
.btn-primary{background:var(--green);color:#041006;border-color:var(--green);box-shadow:0 0 30px rgba(98,255,114,.12)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 0 34px rgba(98,255,114,.24)}
.btn-ghost{border-color:#263628;color:#b9c4ba}
.btn-ghost:hover{border-color:var(--green);color:var(--green)}

.profile-terminal{
  border:1px solid #243226;
  background:linear-gradient(180deg,rgba(11,16,11,.94),rgba(5,8,5,.94));
  box-shadow:var(--shadow);
  transform:perspective(1100px) rotateY(-4deg) rotateX(2deg);
  transition:.4s ease;
}
.profile-terminal:hover{transform:perspective(1100px) rotateY(0) rotateX(0) translateY(-3px)}
.terminal-bar{
  height:44px;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  border-bottom:1px solid #1d2c20;
  padding:0 15px;
  color:#647366;
  font:500 .65rem var(--font-display);
  letter-spacing:.12em;
}
.terminal-bar>span:last-child{text-align:right}
.terminal-dots{display:flex;gap:6px}
.terminal-dots span{width:7px;height:7px;border:1px solid #3f5042;border-radius:50%}
.terminal-body{padding:38px}
.avatar-orbit{
  width:190px;height:190px;
  margin:0 auto 36px;
  position:relative;
  display:grid;place-items:center;
}
.avatar-core{
  width:112px;height:112px;border-radius:50%;
  display:grid;place-items:center;
  font:700 4rem var(--font-display);
  color:var(--green);
  border:1px solid var(--green);
  background:#061007;
  box-shadow:inset 0 0 35px rgba(98,255,114,.10),0 0 32px rgba(98,255,114,.10);
}
.orbit{position:absolute;border-radius:50%;border:1px solid rgba(98,255,114,.22)}
.orbit-a{width:145px;height:145px;animation:spin 10s linear infinite}
.orbit-b{width:190px;height:190px;border-style:dashed;animation:spin 18s linear infinite reverse}
.orbit-a::before,.orbit-b::before{
  content:"";position:absolute;width:7px;height:7px;border-radius:50%;
  background:var(--green);box-shadow:0 0 12px var(--green);
  left:50%;top:-4px;
}
@keyframes spin{to{transform:rotate(360deg)}}
.prompt{color:var(--green);font:500 .72rem var(--font-display);letter-spacing:.1em}
.profile-meta h2{font:700 2.2rem var(--font-display);letter-spacing:.08em;margin:7px 0 4px}
.handle{margin:0;color:#728074;font-size:.78rem;word-break:break-all}
.mini-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:28px 0}
.mini-stats>div{border:1px solid #1c2b1e;padding:14px 10px;background:#080c08}
.stat-value{display:block;font:700 1.55rem var(--font-display);color:var(--green)}
.stat-label{display:block;margin-top:3px;font:600 .58rem var(--font-display);letter-spacing:.14em;color:#667568}
.terminal-line{
  display:flex;justify-content:space-between;
  border-top:1px solid #1c2b1e;padding-top:18px;
  color:#657267;font:600 .64rem var(--font-display);letter-spacing:.14em;
}
.online-text{color:var(--green)}

.scroll-indicator{
  position:absolute;bottom:26px;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:8px;
  color:#526154;font:500 .55rem var(--font-display);letter-spacing:.2em;
}
.scroll-indicator i{width:1px;height:34px;background:linear-gradient(var(--green),transparent)}

.section{
  max-width:1440px;
  margin:0 auto;
  padding:130px clamp(22px,6vw,110px);
}
.section-heading{
  display:flex;gap:20px;align-items:flex-start;
  margin-bottom:55px;
}
.section-index{
  color:#506152;font:600 .7rem var(--font-display);
  border:1px solid #243026;padding:7px 9px;
}
.section-heading h2{
  margin:8px 0 0;
  font:600 clamp(2.3rem,4vw,4.8rem)/1 var(--font-display);
  letter-spacing:-.04em;
  max-width:900px;
}

.profile-layout{
  display:grid;
  grid-template-columns:1.25fr .75fr;
  gap:18px;
}
.about-card,.data-panel,.stat-card,.game-card{
  border:1px solid #1c2a1e;
  background:linear-gradient(145deg,rgba(11,16,11,.9),rgba(5,8,5,.9));
}
.about-card{padding:clamp(28px,5vw,62px);position:relative;overflow:hidden}
.about-card::after{
  content:"";
  position:absolute;width:260px;height:260px;border:1px solid rgba(98,255,114,.08);
  border-radius:50%;right:-100px;bottom:-140px;
}
.card-corner{font:600 .65rem var(--font-display);letter-spacing:.18em;color:var(--green);margin-bottom:32px}
.large-copy{font:500 clamp(1.5rem,2.7vw,2.75rem)/1.25 var(--font-display);letter-spacing:-.025em;margin:0 0 28px}
.about-card>p:last-child{color:#8f9c91;line-height:1.8;max-width:760px}
.data-panel{padding:14px}
.data-row{
  min-height:74px;
  padding:0 18px;
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  border-bottom:1px solid #19251a;
}
.data-row:last-child{border-bottom:0}
.data-row span{font:600 .62rem var(--font-display);letter-spacing:.16em;color:#58685b}
.data-row strong{font:600 .95rem var(--font-display);color:#d8e1d9}

.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.stat-card{padding:34px;min-height:220px;display:flex;flex-direction:column;justify-content:flex-end}
.stat-card-number{font:700 clamp(3.8rem,7vw,7.2rem)/.9 var(--font-display);letter-spacing:-.06em;color:var(--green)}
.stat-card p{margin:15px 0 28px;color:#8e9b90}
.stat-bar{height:2px;background:#1c2a1e}
.stat-bar i{display:block;width:var(--value);height:100%;background:var(--green);box-shadow:0 0 14px rgba(98,255,114,.45)}
.steam-banner{
  margin-top:18px;
  min-height:160px;
  border:1px solid #224125;
  background:
    radial-gradient(circle at 90% 50%,rgba(98,255,114,.11),transparent 30%),
    #071008;
  display:flex;justify-content:space-between;align-items:center;
  padding:32px clamp(26px,4vw,52px);
  transition:.25s ease;
}
.steam-banner:hover{border-color:var(--green);transform:translateY(-2px)}
.steam-banner h3{font:600 clamp(1rem,2.1vw,2rem) var(--font-display);margin:12px 0 0;word-break:break-all}
.steam-arrow{font-size:3.5rem;color:var(--green)}

.games-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.game-card{overflow:hidden;position:relative;transition:.3s ease}
.game-card:hover{transform:translateY(-6px);border-color:#35593a;box-shadow:var(--shadow)}
.game-number{
  position:absolute;top:14px;right:14px;z-index:2;
  font:600 .64rem var(--font-display);color:var(--green);
  border:1px solid rgba(98,255,114,.28);padding:6px 8px;background:rgba(4,6,4,.7);
}
.game-art{
  height:260px;
  display:flex;align-items:flex-end;
  padding:28px;
  position:relative;
  overflow:hidden;
}
.game-art::before{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(135deg,transparent 0 49%,rgba(98,255,114,.09) 50%,transparent 51%),
    repeating-linear-gradient(90deg,rgba(98,255,114,.025) 0 1px,transparent 1px 25px),
    repeating-linear-gradient(rgba(98,255,114,.025) 0 1px,transparent 1px 25px);
}
.game-art::after{
  content:"";position:absolute;width:180px;height:180px;border:1px solid rgba(98,255,114,.15);
  border-radius:50%;right:-60px;top:20px;
}
.game-art-a{background:radial-gradient(circle at 70% 20%,#263229,#0a0f0b 60%)}
.game-art-b{background:radial-gradient(circle at 40% 10%,#223c28,#090d0a 65%)}
.game-art-c{background:radial-gradient(circle at 80% 30%,#173d21,#090d0a 65%)}
.game-art span{position:relative;z-index:1;font:700 clamp(1.7rem,2.8vw,3rem)/.88 var(--font-display);letter-spacing:-.04em;color:#eaf1ea}
.game-info{padding:24px}
.game-info p{margin:0;color:var(--green);font:600 .62rem var(--font-display);letter-spacing:.15em;text-transform:uppercase}
.game-info h3{margin:8px 0 10px;font:600 1.25rem var(--font-display)}
.game-info span{font-size:.76rem;color:#667368}

.outro{
  min-height:58vh;
  display:grid;place-items:center;
  padding:120px 24px;
  border-top:1px solid #172219;
  border-bottom:1px solid #172219;
  background:radial-gradient(circle at 50% 50%,rgba(98,255,114,.09),transparent 42%);
}
.outro-inner{text-align:center;max-width:900px}
.outro h2{font:700 clamp(3rem,7vw,7rem)/.95 var(--font-display);letter-spacing:-.055em;margin:15px 0 36px}

footer{
  min-height:120px;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:28px clamp(22px,4vw,72px);
  color:#607063;
  font:500 .66rem var(--font-display);letter-spacing:.12em;
}
.footer-brand{display:flex;align-items:center;gap:10px;color:#a7b3a8}
footer a{transition:.2s ease} footer a:hover{color:var(--green)}

.reveal{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .75s cubic-bezier(.22,.61,.36,1),transform .75s cubic-bezier(.22,.61,.36,1);
}
.reveal.visible{opacity:1;transform:none}
.delay-1{transition-delay:.1s}.delay-2{transition-delay:.2s}

@media (max-width:1050px){
  .hero{grid-template-columns:1fr;gap:70px;padding-top:150px}
  .hero-visual{max-width:620px;width:100%;justify-self:center}
  .profile-layout{grid-template-columns:1fr}
}
@media (max-width:820px){
  .nav{display:none}
  .stats-grid,.games-grid{grid-template-columns:1fr}
  .game-art{height:230px}
  .section{padding-top:95px;padding-bottom:95px}
}
@media (max-width:560px){
  .site-header{height:68px;padding-left:16px;padding-right:16px}
  .brand-name{display:none}
  .header-cta{font-size:.66rem}
  .hero{padding:120px 20px 75px}
  .hero h1{font-size:clamp(3.35rem,20vw,5.5rem)}
  .terminal-body{padding:24px 18px}
  .avatar-orbit{transform:scale(.9);margin-bottom:20px}
  .mini-stats{gap:5px}
  .mini-stats>div{padding:12px 5px}
  .section{padding-left:20px;padding-right:20px}
  .section-heading{gap:12px}
  .about-card{padding:28px 22px}
  .steam-banner{align-items:flex-end}
  .steam-arrow{font-size:2.4rem}
  footer{flex-direction:column;text-align:center;padding:35px 20px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
  #matrix,.scanline{display:none}
}


/* --- Steam-profile fusion layer --- */
body{
  background:
    linear-gradient(rgba(4,6,4,.82),rgba(4,6,4,.92)),
    radial-gradient(circle at 8% 32%,rgba(97,255,29,.24),transparent 20%),
    radial-gradient(circle at 88% 55%,rgba(97,255,29,.18),transparent 22%),
    linear-gradient(115deg,#050805 0%,#101410 45%,#070a07 100%);
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-4;
  pointer-events:none;
  background:
    radial-gradient(circle at 4% 42%,rgba(112,255,34,.22),transparent 11%),
    radial-gradient(circle at 95% 64%,rgba(112,255,34,.18),transparent 13%);
  filter:blur(30px);
}
.hero::after{
  content:"";
  position:absolute;
  inset:auto 0 0 0;
  height:45%;
  pointer-events:none;
  background:linear-gradient(transparent,rgba(4,6,4,.74));
}

.steam-profile-card{
  border:1px solid rgba(167,255,133,.12);
  background:rgba(21,24,21,.88);
  box-shadow:0 28px 80px rgba(0,0,0,.42),0 0 55px rgba(98,255,114,.07);
  backdrop-filter:blur(18px);
  overflow:hidden;
  position:relative;
}
.steam-profile-card::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(120deg,rgba(255,255,255,.025),transparent 35%,rgba(98,255,114,.035));
}
.steam-profile-cover{
  min-height:240px;
  position:relative;
  padding:28px;
  display:flex;
  align-items:flex-end;
  gap:24px;
  background:
    linear-gradient(180deg,rgba(9,16,11,.28),rgba(10,14,10,.92)),
    radial-gradient(circle at 70% 20%,rgba(89,255,70,.20),transparent 28%),
    linear-gradient(135deg,#12271a,#0d1612 45%,#07100a);
}
.steam-cover-grid{
  position:absolute;
  inset:0;
  opacity:.32;
  background:
    repeating-linear-gradient(90deg,rgba(124,255,87,.06) 0 1px,transparent 1px 46px),
    repeating-linear-gradient(rgba(124,255,87,.045) 0 1px,transparent 1px 46px);
  mask-image:linear-gradient(to bottom,black,transparent 85%);
}
.steam-avatar-wrap{
  position:relative;
  z-index:2;
  width:150px;
  height:150px;
  padding:5px;
  border-radius:12px;
  background:linear-gradient(145deg,#9bff27,#4cff00);
  box-shadow:0 0 22px rgba(103,255,33,.48);
  flex:none;
}
.steam-avatar{
  width:100%;
  height:100%;
  border-radius:8px;
  display:grid;
  place-items:center;
  font:700 5.2rem var(--font-display);
  color:#72ff25;
  border:2px solid #1b4510;
  background:
    radial-gradient(circle at 50% 35%,rgba(105,255,56,.28),transparent 24%),
    linear-gradient(145deg,#0b1b0c,#172218 55%,#061007);
  text-shadow:0 0 20px rgba(98,255,114,.45);
}
.steam-user-head{
  position:relative;
  z-index:2;
  flex:1;
  min-width:0;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:20px;
}
.steam-status{
  margin:0 0 4px;
  color:#889088;
  font-size:.72rem;
  letter-spacing:.12em;
}
.steam-user-head h2{
  margin:0 0 4px;
  font:500 2.3rem var(--font-display);
}
.steam-user-head>div>span{
  color:#7c877d;
  font-size:.78rem;
  word-break:break-all;
}
.steam-level{
  display:flex;
  align-items:center;
  gap:10px;
  color:#ddd;
  font:400 1rem var(--font-body);
  flex:none;
}
.steam-level strong{
  width:42px;
  height:42px;
  border-radius:50%;
  border:2px solid #c8284e;
  display:grid;
  place-items:center;
  font:500 1rem var(--font-body);
  color:#ddd;
  box-shadow:inset 0 0 12px rgba(200,40,78,.12);
}
.steam-profile-body{
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:14px;
  padding:14px;
  background:rgba(12,14,12,.88);
}
.steam-badge,.steam-collector{
  border:1px solid rgba(255,255,255,.035);
  background:rgba(0,0,0,.27);
}
.steam-badge{
  display:flex;
  align-items:center;
  gap:14px;
  padding:18px;
}
.service-icon{
  width:56px;
  height:56px;
  display:grid;
  place-items:center;
  background:linear-gradient(145deg,#1fcfa0,#0c6652);
  color:#eafffa;
  font:600 1.1rem var(--font-display);
  border:1px solid rgba(255,255,255,.18);
  box-shadow:inset 0 0 18px rgba(255,255,255,.15);
}
.steam-badge strong,.steam-badge span{
  display:block;
}
.steam-badge strong{font-size:.88rem}
.steam-badge span{margin-top:4px;color:#9da69f;font-size:.75rem}
.steam-collector{padding:18px}
.steam-collector>p{
  margin:0 0 16px;
  color:#d8ddd8;
  font-size:.9rem;
}
.collector-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
}
.collector-grid>div{
  min-width:0;
}
.collector-grid strong{
  display:block;
  font:400 1.65rem var(--font-body);
  color:#f2f4f2;
}
.collector-grid span{
  display:block;
  margin-top:3px;
  color:#8c958e;
  font-size:.72rem;
}

.social-section{
  position:relative;
}
.social-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:16px;
}
.social-card{
  min-height:130px;
  padding:22px 24px;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:18px;
  border:1px solid #203122;
  background:linear-gradient(145deg,rgba(14,19,14,.94),rgba(6,9,6,.94));
  transition:.25s ease;
}
.social-card:hover{
  transform:translateY(-4px);
  border-color:#4cff5c;
  box-shadow:0 16px 40px rgba(0,0,0,.24),0 0 26px rgba(98,255,114,.08);
}
.social-icon{
  width:58px;
  height:58px;
  display:grid;
  place-items:center;
  border:1px solid #3b5d40;
  color:var(--green);
  font:700 1rem var(--font-display);
  background:#0a100a;
}
.social-card span{
  display:block;
  color:#7f8c82;
  font-size:.75rem;
  margin-bottom:5px;
}
.social-card strong{
  font:600 1.35rem var(--font-display);
}
.social-card b{
  color:var(--green);
  font-size:1.7rem;
  font-weight:400;
}
.footer-links{
  display:flex;
  align-items:center;
  gap:16px;
}
.footer-links a:hover{color:var(--green)}

@media (max-width:820px){
  .steam-profile-body{grid-template-columns:1fr}
  .social-grid{grid-template-columns:1fr}
}
@media (max-width:620px){
  .steam-profile-cover{
    min-height:auto;
    padding:22px 16px;
    flex-direction:column;
    align-items:flex-start;
  }
  .steam-avatar-wrap{width:118px;height:118px}
  .steam-avatar{font-size:4rem}
  .steam-user-head{
    width:100%;
    align-items:flex-start;
  }
  .steam-user-head h2{font-size:1.8rem}
  .collector-grid{grid-template-columns:repeat(2,1fr)}
  .footer-links{flex-wrap:wrap;justify-content:center}
}