/* Kolory i odstępy strony — główne miejsce do zmiany wyglądu. */
:root {
  --bg:#0c1020;
  --panel:#252c46;
  --line:#505c7b;
  --text:#f3f4fc;
  --muted:#abb0c7;
  --purple:#b796ff;
  --green:#b6eb78;
  --blue:#83d6ef;
  --yellow:#f7dc80
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:96px
}
body {
  margin:0;
  background:var(--bg);
  color:var(--text);
  font:16px/1.65 'Trebuchet MS',Arial,sans-serif
}
button,a,input {
  -webkit-tap-highlight-color:transparent
}
button,a {
  touch-action:manipulation
}
button,.button {
  font:700 14px/1.3 'Courier New',monospace;
  border:1px solid var(--line);
  color:var(--text);
  background:#252a42;
  padding:14px 20px;
  cursor:pointer;
  border-radius:5px;
  min-height:46px
}
a {
  color:inherit;
  text-decoration:none
}
button:disabled {
  cursor:default
}
button:hover:not(:disabled),.button:hover {
  filter:brightness(1.13)
}
:focus-visible {
  outline:3px solid var(--yellow);
  outline-offset:5px
}
img {
  display:block;
  max-width:100%
}
button img {
  pointer-events:none
}
h1,h2,h3,p {
  margin-top:0
}
h1,h2,h3 {
  line-height:1.15
}
h1,h2,.eyebrow,.level,.menu-tile strong {
  font-family:'Courier New',monospace
}
h1 {
  font-size:clamp(46px,6.3vw,88px);
  letter-spacing:-5px;
  line-height:1.03;
  margin:27px 0 20px;
  font-weight:900;
  text-shadow:4px 4px #30354b
}
h1 span {
  color:var(--purple)
}
h1 i {
  color:var(--yellow);
  font-style:normal
}
h2 {
  font-size:clamp(30px,3.5vw,43px);
  letter-spacing:-1.8px;
  margin:12px 0 0
}
h2 span {
  color:var(--purple)
}
h3 {
  font-size:23px;
  margin-bottom:14px
}
.eyebrow {
  font-size:12px;
  font-weight:bold;
  letter-spacing:2px;
  color:var(--purple)
}
.muted {
  color:var(--muted);
  font-size:14px
}
.primary {
  background:var(--green);
  color:#17221c;
  border-color:var(--green);
  box-shadow:0 4px 0 #618645
}
.button {
  display:inline-flex;
  gap:60px;
  align-items:center;
  padding:20px 27px
}
.skip {
  position:fixed;
  top:-100px;
  z-index:100;
  background:var(--green);
  color:#111;
  padding:10px
}
.skip:focus {
  top:0
}
header {
  height:78px;
  position:sticky;
  top:0;
  z-index:20;
  display:flex;
  align-items:center;
  gap:30px;
  padding:0 max(24px,calc((100vw - 1200px)/2));
  background:#101322f5;
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(12px)
}
.brand {
  display:flex;
  align-items:center;
  gap:16px;
  font:bold 13px 'Courier New',monospace;
  letter-spacing:1px;
  white-space:nowrap
}
.brand img {
  width:70px
}
.header-link {
  margin-left:auto;
  font-size:14px;
  color:var(--muted)
}
#crystal-count {
  white-space:nowrap;
  border:1px solid #696080;
  background:#2a2440;
  padding:8px 15px;
  border-radius:5px;
  font:bold 16px 'Courier New',monospace
}
main {
  max-width:1200px;
  margin:auto;
  padding:0 28px
}
section {
  padding:72px 0;
  position:relative;
  scroll-margin-top:10px
}
section+section {
  border-top:1px solid var(--line)
}
.intro {
  min-height:calc(100svh - 78px);
  display:grid;
  grid-template-columns:1.1fr 1fr;
  align-items:center;
  gap:20px;
  padding:45px 0 85px
}
.birthday {
  display:inline-block;
  color:var(--yellow);
  border:1px solid #655c43;
  background:#2b2930;
  padding:8px 13px;
  letter-spacing:2px
}
.level {
  font-size:25px;
  font-weight:bold;
  margin:25px 0 18px
}
.level span {
  color:var(--green)
}
.stats {
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  margin-bottom:32px
}
.stats span {
  font-size:13px;
  color:var(--blue);
  padding:5px 9px;
  background:#1d2836;
  border:1px solid #324257
}
.stats span:nth-child(2) {
  color:var(--purple);
  background:#292239;
  border-color:#473957
}
.stats span:nth-child(3) {
  color:var(--green);
  background:#242e29;
  border-color:#3b4a39
}
.hero-note {
  margin:25px 0 0
}
.hero-art {
  position:relative;
  min-height:430px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:radial-gradient(ellipse,#29264a 0%,transparent 67%)
}
.hero-art:before {
  content:'';
  position:absolute;
  inset:10% 10%;
  border:1px dashed #44405c;
  transform:rotate(-5deg);
  z-index:-1
}
.hero-player {
  height:390px;
  width:390px;
  object-fit:contain;
  filter:drop-shadow(0 12px 20px #090b1a)
}
.art-tag {
  position:absolute;
  top:8px;
  left:40px;
  font:12px 'Courier New',monospace;
  color:var(--muted);
  letter-spacing:2px
}
.cake-unlock {
  position:absolute;
  bottom:-6px;
  right:0;
  display:flex;
  align-items:center;
  gap:16px;
  border:1px solid #635344;
  background:#242331;
  padding:12px 20px;
  box-shadow:5px 5px 0 #080c19;
  transform:rotate(-3deg)
}
.cake-unlock img {
  width:73px;
  height:77px;
  object-fit:contain
}
.cake-unlock span {
  font:12px/1.7 'Courier New',monospace;
  color:var(--muted)
}
.cake-unlock strong {
  display:block;
  color:var(--yellow);
  font-size:16px
}
.intro-bottom {
  position:absolute;
  bottom:25px;
  left:0;
  right:0;
  display:flex;
  justify-content:space-between;
  font:11px 'Courier New',monospace;
  letter-spacing:2px;
  color:var(--muted)
}
.crystal {
  border:0;
  background:none;
  padding:5px;
  min-width:50px;
  width:54px;
  height:70px;
  filter:drop-shadow(0 0 9px #a253ec88);
  animation:bob 3s ease-in-out infinite;
  flex-shrink:0
}
.crystal img {
  height:100%;
  margin:auto;
  object-fit:contain
}
.hero-art .crystal {
  position:absolute;
  left:6px;
  bottom:60px
}
.crystal[hidden] {
  display:none
}
@keyframes bob {
  50% {
    transform:translateY(-7px)
  }
}
.section-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  margin-bottom:30px
}
.section-heading p {
  font-size:14px;
  color:var(--muted);
  max-width:260px;
  margin:0
}
.menu-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:17px
}
.menu-tile {
  position:relative;
  text-align:left;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:9px;
  padding:22px;
  display:flex;
  flex-direction:column;
  transition:transform .2s,border-color .2s
}
.menu-tile img {
  width:95px;
  height:95px;
  object-fit:contain;
  margin-bottom:12px
}
.menu-tile strong {
  font-size:18px;
  letter-spacing:.2px
}
.menu-tile span {
  font-size:13px;
  color:var(--muted);
  margin-top:8px
}
.menu-tile b {
  position:absolute;
  top:24px;
  right:23px;
  color:var(--muted);
  font-size:22px
}
.menu-tile:hover:not(:disabled) {
  transform:translateY(-4px);
  border-color:var(--purple)
}
.tile-1 {
  border-top:2px solid #64b8da
}
.tile-2 {
  border-top:2px solid #9cbb62
}
.tile-3 {
  border-top:2px solid #ddc86a
}
.tile-4 {
  border-top:2px solid #bd8adc
}
.tile-0 {
  border-top:2px solid #9580da
}
.locked {
  border-style:dashed;
  background:#161928
}
.locked img {
  filter:grayscale(1);
  opacity:.35
}
.games-grid,.mc-models {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:24px
}
.game-card,.model-card,.craft-card {
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:9px;
  overflow:hidden
}
.image-open {
  padding:0;
  border:0;
  background:#131725;
  display:block;
  width:100%;
  border-radius:0
}
.cover img {
  width:100%;
  height:260px;
  object-fit:cover
}
.card-body {
  padding:25px
}
.card-body h3 {
  margin-top:12px
}
.card-body p {
  color:var(--muted);
  font-size:15px;
  margin-bottom:20px
}
.gallery {
  display:flex;
  gap:10px
}
.gallery button {
  width:84px;
  height:58px;
  border:1px solid #555b72;
  border-radius:3px;
  overflow:hidden
}
.gallery img {
  width:100%;
  height:100%;
  object-fit:cover
}
.models-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px
}
.model-shot {
  height:230px;
  background:#151824
}
.model-shot img {
  height:100%;
  width:100%;
  object-fit:contain
}
.viewer {
  background:radial-gradient(ellipse,#2a334b,#121624);
  position:relative
}
.viewer canvas {
  width:100%;
  height:230px;
  display:block;
  touch-action:none;
  cursor:grab
}
.zoom {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:8px;
  gap:4px
}
.zoom button {
  padding:4px 12px;
  min-width:44px
}
.zoom span {
  font-size:11px;
  color:var(--muted);
  text-align:center
}
.models-grid .card-body .muted {
  font-size:11px
}
.minecraft-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:17px
}
.craft-shot img {
  width:100%;
  height:175px;
  object-fit:cover
}
.texture {
  width:44px;
  height:44px;
  image-rendering:pixelated;
  object-fit:contain;
  float:right;
  margin:0 0 10px 10px;
  background:#e5e7ed;
  border-radius:3px
}
.craft-card .card-body {
  padding:19px
}
.craft-card h3 {
  font-size:20px
}
.mc-models {
  margin-top:22px
}
.mc-models .viewer canvas {
  height:270px
}
.idea-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  padding:12px 4px
}
.idea {
  padding:28px;
  min-height:195px;
  color:#222438;
  position:relative;
  box-shadow:5px 6px #080b15;
  transform:rotate(-2deg)
}
.idea h3 {
  font-size:24px;
  max-width:240px;
  margin-top:26px
}
.note-0 {
  background:#ecdb9b
}
.note-1 {
  background:#b5daf1;
  transform:rotate(1deg)
}
.note-2 {
  background:#bedaa3
}
.status {
  font:700 11px 'Courier New',monospace;
  border:1px solid #505462;
  padding:5px 8px;
  letter-spacing:1px
}
.note-mark {
  position:absolute;
  right:20px;
  bottom:10px;
  font-size:32px
}
.drawing-app {
  border:1px solid var(--line);
  border-radius:8px;
  overflow:hidden;
  background:var(--panel);
  margin:26px 0 12px
}
.toolbar,.drawing-footer {
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  padding:17px
}
.tool-group {
  display:flex;
  gap:7px
}
.toolbar button {
  padding:10px 14px
}
.toolbar button[aria-pressed=true] {
  outline:2px solid var(--purple);
  outline-offset:2px
}
.swatch {
  width:33px;
  min-height:33px;
  border-radius:50%;
  padding:0!important;
  border:3px solid #34394e
}
.brush-label {
  display:flex;
  gap:12px;
  font-size:14px;
  align-items:center;
  margin-left:auto
}
input[type=range] {
  width:100px;
  accent-color:var(--purple)
}
#drawing {
  display:block;
  background:white;
  width:100%;
  height:auto;
  touch-action:none;
  cursor:crosshair
}
.drawing-footer span {
  margin-right:auto;
  font-size:14px;
  color:var(--muted)
}
.about {
  display:flex;
  align-items:center;
  gap:55px
}
.about>img {
  width:230px
}
.about p {
  color:var(--muted);
  margin:20px 0 0
}
.game-shell {
  max-width:850px;
  margin:30px auto;
  border:1px solid var(--line);
  border-radius:9px;
  overflow:hidden;
  background:var(--panel)
}
.game-hud {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:14px 20px;
  font-family:'Courier New',monospace
}
.game-hud #lives {
  display:flex;
  gap:8px
}
.game-hud img {
  width:26px;
  height:25px;
  object-fit:contain
}
.arena-wrap {
  position:relative
}
#arena {
  width:100%;
  height:auto;
  display:block;
  background:#35572c;
  touch-action:none
}
#game-overlay {
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  background:#101322df;
  padding:15px
}
#game-overlay[hidden] {
  display:none
}
#game-overlay h3 {
  font:700 clamp(22px,4vw,37px) 'Courier New',monospace;
  margin:12px 0
}
#game-overlay p {
  margin-bottom:15px;
  line-height:1.5
}
#back-lab {
  font-size:12px;
  margin-top:16px;
  text-decoration:underline
}
.game-controls {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px;
  gap:12px
}
.game-controls p {
  font-size:14px;
  margin:0
}
.dpad {
  display:grid;
  grid-template-columns:repeat(3,52px);
  gap:5px
}
.dpad button {
  font-size:20px;
  padding:10px;
  touch-action:none;
  user-select:none
}
.dpad button:first-child {
  grid-column:2
}
.dpad button:nth-child(2) {
  grid-column:1
}
.dpad button.active {
  background:var(--purple);
  color:#141526
}
footer {
  max-width:1144px;
  margin:auto;
  border-top:1px solid var(--line);
  padding:28px 0;
  display:flex;
  justify-content:space-between;
  gap:20px;
  color:var(--muted);
  font:11px/1.6 'Courier New',monospace
}
#toast {
  position:fixed;
  bottom:26px;
  left:50%;
  transform:translateX(-50%);
  background:var(--green);
  color:#18221c;
  font:bold 15px/1.5 'Courier New',monospace;
  padding:15px 23px;
  z-index:100;
  border-radius:6px;
  box-shadow:0 8px 30px #0007;
  display:none;
  text-align:center;
  max-width:90vw
}
#toast.show {
  display:block
}
#confetti {
  position:fixed;
  inset:0;
  z-index:80;
  pointer-events:none;
  overflow:hidden
}
#confetti i {
  position:absolute;
  width:7px;
  height:11px;
  top:-20px;
  animation:fall 2.8s ease-in forwards
}
@keyframes fall {
  to {
    transform:translateY(105vh) rotate(650deg)
  }
}
dialog {
  padding:45px 15px 15px;
  background:#171c2d;
  border:1px solid var(--line);
  border-radius:8px;
  max-width:95vw;
  max-height:94vh;
  color:white
}
dialog::backdrop {
  background:#050713df
}
dialog img {
  max-height:78vh;
  max-width:85vw;
  object-fit:contain
}
#close-lightbox {
  position:absolute;
  right:8px;
  top:3px;
  padding:5px 13px;
  min-height:36px
}
.reveal {
  animation:appear .55s ease-out
}
@keyframes appear {
  from {
    opacity:.5;
    transform:translateY(12px)
  }
}
[hidden] {
  display:none!important
}
@media(min-width:1450px) {
  .intro {
    min-height:720px
  }
}
@media(max-width:950px) {
  .minecraft-grid {
    grid-template-columns:repeat(2,1fr)
  }
  .models-grid {
    gap:12px
  }
  .card-body {
    padding:19px
  }
  .hero-player {
    width:330px;
    height:360px
  }
  .brand span {
    display:none
  }
  .menu-tile strong {
    font-size:16px
  }
  h1 {
    letter-spacing:-3px
  }
  .hero-art {
    min-height:380px
  }
  .stats {
    max-width:330px
  }
  footer {
    margin:0 28px
  }
}
@media(max-width:650px) {
  header {
    height:66px;
    padding:0 18px;
    gap:12px
  }
  .brand img {
    width:63px
  }
  .header-link {
    font-size:12px
  }
  #crystal-count {
    font-size:14px;
    padding:8px 10px
  }
  main {
    padding:0 20px
  }
  section {
    padding:45px 0
  }
  .intro {
    grid-template-columns:1fr;
    padding:35px 0 58px;
    gap:8px;
    min-height:calc(100svh - 66px)
  }
  h1 {
    font-size:50px;
    letter-spacing:-3px;
    margin:22px 0 14px
  }
  .birthday {
    font-size:10px
  }
  .hero-copy {
    position:relative;
    z-index:1
  }
  .level {
    font-size:23px;
    margin:18px 0 12px
  }
  .stats {
    gap:5px;
    max-width:none;
    margin-bottom:20px
  }
  .stats span {
    font-size:11px;
    padding:4px 6px
  }
  .button {
    padding:15px 24px
  }
  .hero-note {
    font-size:12px;
    margin:19px 0 0
  }
  .hero-art {
    min-height:230px;
    margin-top:8px
  }
  .hero-player {
    height:260px;
    width:260px
  }
  .art-tag {
    top:10px;
    left:0;
    font-size:9px
  }
  .cake-unlock {
    right:0;
    bottom:6px;
    padding:8px 12px;
    gap:8px
  }
  .cake-unlock img {
    width:47px;
    height:54px
  }
  .cake-unlock strong {
    font-size:12px
  }
  .cake-unlock span {
    font-size:10px
  }
  .hero-art .crystal {
    left:16px;
    bottom:40px
  }
  .intro-bottom {
    font-size:8px;
    letter-spacing:1px;
    bottom:18px
  }
  .section-heading {
    align-items:flex-start;
    gap:12px;
    margin-bottom:24px
  }
  .section-heading>p {
    display:none
  }
  .eyebrow {
    font-size:10px;
    letter-spacing:1.5px
  }
  h2 {
    font-size:31px
  }
  .menu-grid {
    grid-template-columns:repeat(2,1fr);
    gap:12px
  }
  .menu-tile {
    padding:16px 12px
  }
  .menu-tile img {
    width:73px;
    height:73px
  }
  .menu-tile strong {
    font-size:13px
  }
  .menu-tile span {
    font-size:11px;
    line-height:1.5
  }
  .menu-tile b {
    top:16px;
    right:12px;
    font-size:17px
  }
  .games-grid,.models-grid,.mc-models,.idea-grid {
    grid-template-columns:1fr;
    gap:20px
  }
  .cover img {
    height:215px
  }
  .models-grid .model-shot {
    height:270px
  }
  .models-grid .viewer canvas {
    height:270px
  }
  .minecraft-grid {
    gap:12px
  }
  .craft-shot img {
    height:125px
  }
  .craft-card .card-body {
    padding:12px
  }
  .craft-card h3 {
    font-size:17px;
    clear:both
  }
  .craft-card p {
    font-size:13px
  }
  .texture {
    width:35px;
    height:35px
  }
  .idea {
    min-height:170px
  }
  .idea h3 {
    max-width:none
  }
  .toolbar {
    gap:15px;
    padding:14px
  }
  .toolbar button {
    font-size:12px;
    padding:9px
  }
  .brush-label {
    margin-left:0
  }
  .tool-group {
    gap:7px
  }
  .swatch {
    width:30px;
    min-height:30px
  }
  .drawing-footer {
    padding:12px;
    gap:8px
  }
  .drawing-footer button {
    font-size:12px;
    padding:10px 13px
  }
  .drawing-footer span {
    order:4;
    flex-basis:100%;
    text-align:center;
    margin-top:7px
  }
  .about {
    flex-direction:column;
    gap:23px;
    text-align:center
  }
  .about>img {
    width:190px
  }
  .about h2 {
    font-size:29px
  }
  .about p {
    font-size:14px
  }
  footer {
    margin:0 20px;
    flex-wrap:wrap;
    font-size:10px
  }
  footer span:last-child {
    width:100%
  }
  .game-controls p {
    font-size:12px
  }
  .game-controls .muted {
    font-size:11px
  }
  .game-controls {
    padding:12px
  }
  .dpad {
    grid-template-columns:repeat(3,48px)
  }
  #game-overlay .eyebrow {
    font-size:9px
  }
  #game-overlay h3 {
    font-size:20px;
    margin:6px 0
  }
  #game-overlay p {
    font-size:13px;
    line-height:1.4;
    margin-bottom:10px
  }
  #game-overlay button {
    min-height:40px;
    padding:10px 20px
  }
  #back-lab {
    margin-top:8px;
    font-size:10px
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  *,*:before,*:after {
    animation:none!important;
    transition:none!important
  }
  #confetti {
    display:none
  }
}
/* Stały obszar dotyku: unosi się obraz kryształu, nie sam przycisk. */
.crystal {
  animation:none
}
.crystal img {
  animation:bob 3s ease-in-out infinite
}
@media (orientation:landscape) and (max-height:550px) {
  .game-shell {display:grid;grid-template-columns:minmax(0,1fr) 190px;max-width:800px}
  .game-hud {grid-column:1 / -1;padding:8px 16px}
  .game-controls {flex-direction:column;justify-content:center;padding:10px}
  #arena {max-height:60svh}
  #game-overlay .eyebrow {display:none}
  #game-overlay h3 {font-size:19px;margin:4px}
  #game-overlay p {font-size:12px;line-height:1.2;margin:5px}
  #game-overlay button {padding:8px 16px;min-height:36px}
  #back-lab {margin-top:5px}
}

/* Poprawki czytelności: centralne logo, mocniejszy tytuł i wyraźniejsze karty. */
header {
  height: 108px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 20px;
}
.brand { grid-column: 2; grid-row: 1; justify-content: center; }
.brand img { width: 190px; }
.brand span { display: none; }
.header-link { grid-column: 1; grid-row: 1; margin-left: 0; justify-self: start; }
#crystal-count { grid-column: 3; grid-row: 1; justify-self: end; }
html { scroll-padding-top: 125px; }
.intro { min-height: calc(100svh - 108px); }
.birthday {
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 900;
  letter-spacing: 1.5px;
  line-height: 1.3;
  color: #ffe698;
  background: #3a2853;
  border: 2px solid #c39be8;
  border-bottom-color: #f7dc80;
  padding: 12px 16px;
  box-shadow: 4px 4px 0 #746041;
  text-shadow: 2px 2px 0 #21162e;
  transform: rotate(-2deg);
}
.menu-tile, .game-card, .model-card, .craft-card {
  box-shadow: 0 7px 18px #0004, inset 0 1px 0 #ffffff0b;
}
.locked { background: #1e243b; border-color: #65718f; }
#menu .crystal-hint {
  display: block;
  max-width: 350px;
  padding: 13px 17px;
  border: 1px solid #9b80c3;
  border-radius: 6px;
  background: #302642;
  color: #f6eeff;
  font-size: 16px;
  line-height: 1.5;
}
.crystal-hint strong { color: #edceff; white-space: nowrap; }
.roblox-play { margin: 0 0 24px; gap: 35px; padding: 15px 25px; }
.model-shot { height: 284px; padding: 14px; background: #1c2237; }
.models-grid .card-body .muted { font-size: 12px; line-height: 1.6; display: block; }
@media (max-width: 650px) {
  header { height: 88px; gap: 8px; padding: 0 12px; }
  .brand img { width: 145px; }
  .header-link { max-width: 65px; font-size: 12px; line-height: 1.4; }
  #crystal-count { padding: 8px; }
  html { scroll-padding-top: 105px; }
  .intro { min-height: calc(100svh - 88px); }
  .birthday { font-size: 19px; padding: 11px 12px; letter-spacing: .3px; }
  #menu .section-heading { flex-direction: column; }
  #menu .crystal-hint { max-width: none; width: 100%; margin-top: 5px; }
  .models-grid .model-shot { height: 284px; }
}
@media (orientation: landscape) and (max-height: 550px) {
  header { height: 76px; }
  .brand img { width: 130px; }
  html { scroll-padding-top: 90px; }
}