@font-face{
  font-family:"Nexa";
  src:url("../fonts/nexa_book.woff2") format("woff2"),
      url("../fonts/nexa_book.woff") format("woff");
  font-weight:300;
  font-style:normal;
  font-display:swap;
}

@font-face{
  font-family:"Nexa";
  src:url("../fonts/nexa_regular.woff2") format("woff2"),
      url("../fonts/nexa_regular.woff") format("woff");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

@font-face{
  font-family:"Nexa";
  src:url("../fonts/nexa_heavy.woff2") format("woff2"),
      url("../fonts/nexa_heavy.woff") format("woff");
  font-weight:800;
  font-style:normal;
  font-display:swap;
}

@font-face{
  font-family:"Nexa";
  src:url("../fonts/nexa_x_bold.woff2") format("woff2"),
      url("../fonts/nexa_x_bold.woff") format("woff");
  font-weight:900;
  font-style:normal;
  font-display:swap;
}

@font-face{
  font-family:"Nexa";
  src:url("../fonts/nexa_black.woff2") format("woff2"),
      url("../fonts/nexa_black.woff") format("woff");
  font-weight:950;
  font-style:normal;
  font-display:swap;
}

:root{
  --bg:#05060a;
  --bg2:#090b12;

  --text:#fff7e8;
  --text2:#f4ead7;
  --muted:rgba(255,247,232,.72);
  --muted2:rgba(255,247,232,.52);

  --line:rgba(255,247,232,.13);
  --line2:rgba(255,247,232,.22);

  --panel:rgba(14,17,25,.90);
  --panel2:rgba(18,22,32,.90);
  --card:rgba(24,29,41,.88);
  --card2:rgba(10,12,18,.94);

  --active-accent:#94a3b8;
  --active-rgb:148,163,184;

  --pad-accent:var(--active-accent);
  --pad-rgb:var(--active-rgb);

  --radius:28px;
}

*{
  box-sizing:border-box;
}

html,
body{
  margin:0;
  min-height:100%;
  background:
    radial-gradient(circle at 50% 0%, rgba(148,163,184,.045), transparent 34%),
    linear-gradient(180deg, var(--bg2) 0%, var(--bg) 100%);
  color:var(--text);
  font-family:"Nexa", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:geometricPrecision;
}

button{
  font:inherit;
}

h1,
h2,
h3,
p{
  margin-top:0;
}

h1{
  margin-bottom:0;
  color:var(--text);
  font-size:clamp(30px, 4vw, 48px);
  line-height:.95;
  letter-spacing:-.045em;
  text-shadow:0 16px 60px rgba(0,0,0,.55);
}

h2{
  margin-bottom:0;
  color:var(--text);
  font-size:clamp(28px, 4vw, 52px);
  line-height:.95;
  letter-spacing:-.058em;
}

h3{
  margin:0 0 12px;
  color:var(--text2);
  font-size:17px;
  line-height:1.05;
  letter-spacing:-.03em;
  font-weight:900;
}

ul{
  margin:0;
  padding-left:18px;
  color:var(--muted);
}

li{
  margin:0 0 8px;
  line-height:1.38;
}

li:last-child{
  margin-bottom:0;
}

.app-shell{
  width:min(1180px, calc(100% - 32px));
  margin:0 auto;
  padding:34px 0 70px;
}

/* HERO */

.hero{
  min-height:230px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:18px;
  padding:34px;
  border:1px solid rgba(var(--active-rgb), .20);
  border-radius:calc(var(--radius) + 8px);
  background:
    linear-gradient(135deg, rgba(255,255,255,.055), transparent 34%),
    linear-gradient(180deg, rgba(20,24,34,.94), rgba(9,11,17,.92));
  box-shadow:
    0 34px 110px rgba(0,0,0,.62),
    inset 0 1px 0 rgba(255,255,255,.08);
}

.hero-copy{
  max-width:760px;
  margin:0;
  color:var(--muted);
  font-size:17px;
  line-height:1.45;
}

.eyebrow{
  margin:0 0 8px;
  color:var(--active-accent);
  font-size:12px;
  line-height:1;
  text-transform:uppercase;
  letter-spacing:.18em;
  font-weight:900;
}

/* PANELS */

.panel,
.result-panel{
  margin-top:18px;
  padding:24px;
  border:1px solid rgba(var(--active-rgb), .20);
  border-radius:var(--radius);
  background:
    linear-gradient(180deg, rgba(17,20,29,.90), rgba(8,10,15,.92));
  box-shadow:
    0 34px 110px rgba(0,0,0,.62),
    inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter:blur(18px);
}

.category-panel{
  border-color:var(--line);
  background:
    linear-gradient(180deg, rgba(17,20,29,.86), rgba(8,10,15,.88));
}

.section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:18px;
  margin-bottom:18px;
}

.stage-head{
  align-items:flex-start;
}

.stage-back,
.close-btn{
  border:1px solid rgba(var(--active-rgb), .26);
  border-radius:999px;
  padding:10px 14px;
  background:rgba(var(--active-rgb), .07);
  color:var(--text);
  cursor:pointer;
  font-weight:900;
}

.stage-back:hover,
.stage-back:focus-visible,
.close-btn:hover,
.close-btn:focus-visible{
  border-color:rgba(var(--active-rgb), .45);
  background:rgba(var(--active-rgb), .11);
  outline:none;
}

.close-btn{
  position:absolute;
  top:18px;
  right:18px;
}

.hidden{
  display:none;
}

.stage-in{
  animation:stageIn .22s ease both;
}

@keyframes stageIn{
  from{
    opacity:0;
    transform:translateY(10px) scale(.99);
  }
  to{
    opacity:1;
    transform:translateY(0) scale(1);
  }
}

/* GRIDS */

.pad-grid{
  display:grid;
  gap:14px;
}

.category-panel .pad-grid{
  grid-template-columns:repeat(4, minmax(0, 1fr));
}

#subcategoryGrid,
#moveGrid{
  grid-template-columns:repeat(3, minmax(0, 1fr));
}

.result-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
  margin-top:24px;
}

/* PADS */

.pad{
  --pad-accent:var(--active-accent);
  --pad-rgb:var(--active-rgb);

  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  align-items:flex-start;
  gap:0;
  border:1px solid rgba(255,247,232,.13);
  border-radius:24px;
  background:
    linear-gradient(145deg, rgba(30,35,49,.90), rgba(11,13,20,.94));
  color:var(--text);
  text-align:left;
  cursor:pointer;
  box-shadow:
    0 14px 36px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.075);
  transition:
    transform .16s ease,
    border-color .16s ease,
    background .16s ease,
    box-shadow .16s ease;
}

.pad::before{
  content:"";
  flex:0 0 auto;
  width:38px;
  height:5px;
  border-radius:999px;
  background:var(--pad-accent);
  box-shadow:0 0 14px rgba(var(--pad-rgb), .30);
}

.pad:hover,
.pad:focus-visible{
  transform:translateY(-3px);
  border-color:rgba(var(--pad-rgb), .42);
  background:
    linear-gradient(145deg, rgba(35,40,56,.94), rgba(13,15,23,.96));
  box-shadow:
    0 18px 46px rgba(0,0,0,.38),
    inset 0 1px 0 rgba(255,255,255,.10);
  outline:none;
}

.pad:active{
  transform:translateY(0) scale(.985);
}

.pad-title{
  color:rgba(255,247,232,.98);
  font-weight:900;
}

.pad-line{
  margin:0;
  color:rgba(255,247,232,.72);
  font-weight:400;
}

/* CATEGORY DOORS */

.category-panel .pad{
  min-height:190px;
  height:auto;
  padding:22px 18px 22px;
}

.category-panel .pad::before{
  margin:0 0 26px;
}

.category-panel .pad-title{
  min-height:30px;
  display:block;
  margin:0 0 16px;
  font-size:25px;
  line-height:1;
  letter-spacing:-.055em;
}

.category-panel .pad-line{
  display:block;
  min-height:auto;
  max-height:none;
  overflow:visible;
  font-size:14.5px;
  line-height:1.38;
}

/* ROOMS */

#subcategoryGrid .pad{
  min-height:164px;
  height:auto;
  padding:18px 18px 19px;
}

#subcategoryGrid .pad::before{
  margin:0 0 18px;
}

#subcategoryGrid .pad-title{
  display:block;
  overflow:visible;
  margin:0 0 10px;
  font-size:23px;
  line-height:1.02;
  letter-spacing:-.055em;
}

#subcategoryGrid .pad-line{
  display:block;
  overflow:visible;
  font-size:14px;
  line-height:1.36;
}

/* MOVES */

#moveGrid .pad{
  min-height:190px;
  height:auto;
  padding:18px 18px 20px;
}

#moveGrid .pad::before{
  margin:0 0 18px;
}

#moveGrid .pad-title{
  display:block;
  overflow:visible;
  margin:0 0 10px;
  font-size:23px;
  line-height:1.02;
  letter-spacing:-.055em;
}

#moveGrid .pad-line{
  display:block;
  overflow:visible;
  font-size:14px;
  line-height:1.36;
}

/* RESULT */

.result-panel{
  position:relative;
  overflow:hidden;
}

.result-top{
  max-width:880px;
  padding-right:76px;
}

.result-top h2{
  margin-bottom:14px;
}

.result-move{
  margin:0;
  color:rgba(255,247,232,.74);
  font-size:19px;
  line-height:1.45;
}

.result-card{
  min-height:154px;
  padding:18px 18px 17px;
  border:1px solid rgba(255,247,232,.115);
  border-radius:20px;
  background:
    linear-gradient(145deg, rgba(30,35,49,.90), rgba(11,13,20,.94));
  box-shadow:
    0 14px 36px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.070);
}

.result-card:hover{
  border-color:rgba(var(--active-rgb), .28);
  background:
    linear-gradient(145deg, rgba(35,40,56,.94), rgba(13,15,23,.96));
  box-shadow:
    0 18px 46px rgba(0,0,0,.34),
    inset 0 1px 0 rgba(255,255,255,.085);
}

.result-card h3{
  color:rgba(255,247,232,.98);
  font-size:16px;
  font-weight:900;
}

.result-card ul{
  color:rgba(255,247,232,.76);
  font-size:14.5px;
  line-height:1.38;
}

/* EXCHANGE HERO */

.hero-exchange{
  border-color:rgba(var(--active-rgb), .24);
  background:
    linear-gradient(180deg, rgba(20,24,34,.94), rgba(9,11,17,.92));
}

.hero-exchange h1{
  color:var(--active-accent);
  font-size:clamp(18px, 2vw, 26px);
  letter-spacing:.18em;
  line-height:1;
}

.hero-exchange .hero-copy{
  max-width:900px;
  color:rgba(255,247,232,.98);
  font-size:clamp(22px, 3.1vw, 36px);
  line-height:1.18;
  letter-spacing:-.045em;
  font-weight:900;
}

/* CATEGORY COLORS */

.pad-transportation{ --pad-accent:#60a5fa; --pad-rgb:96,165,250; }
.pad-housing{ --pad-accent:#38bdf8; --pad-rgb:56,189,248; }
.pad-ownership{ --pad-accent:#f59e0b; --pad-rgb:245,158,11; }
.pad-tools{ --pad-accent:#94a3b8; --pad-rgb:148,163,184; }

.pad-money{ --pad-accent:#34d399; --pad-rgb:52,211,153; }
.pad-debt{ --pad-accent:#ef4444; --pad-rgb:239,68,68; }
.pad-insurance{ --pad-accent:#14b8a6; --pad-rgb:20,184,166; }
.pad-shopping{ --pad-accent:#fb923c; --pad-rgb:251,146,60; }

.pad-career{ --pad-accent:#a78bfa; --pad-rgb:167,139,250; }
.pad-business{ --pad-accent:#fb7185; --pad-rgb:251,113,133; }
.pad-projects{ --pad-accent:#c084fc; --pad-rgb:192,132,252; }
.pad-school{ --pad-accent:#38bdf8; --pad-rgb:56,189,248; }

.pad-health{ --pad-accent:#f43f5e; --pad-rgb:244,63,94; }
.pad-food{ --pad-accent:#84cc16; --pad-rgb:132,204,22; }
.pad-time{ --pad-accent:#0ea5e9; --pad-rgb:14,165,233; }
.pad-maintenance{ --pad-accent:#64748b; --pad-rgb:100,116,139; }

.pad-relationships{ --pad-accent:#e879f9; --pad-rgb:232,121,249; }
.pad-family{ --pad-accent:#f472b6; --pad-rgb:244,114,182; }
.pad-communication{ --pad-accent:#a3e635; --pad-rgb:163,230,53; }
.pad-community{ --pad-accent:#2dd4bf; --pad-rgb:45,212,191; }

.pad-legal{ --pad-accent:#d97706; --pad-rgb:217,119,6; }
.pad-government{ --pad-accent:#818cf8; --pad-rgb:129,140,248; }
.pad-military{ --pad-accent:#22c55e; --pad-rgb:34,197,94; }
.pad-safety{ --pad-accent:#f97316; --pad-rgb:249,115,22; }

.pad-energy{ --pad-accent:#fde047; --pad-rgb:253,224,71; }
.pad-environment{ --pad-accent:#4ade80; --pad-rgb:74,222,128; }
.pad-technology{ --pad-accent:#22d3ee; --pad-rgb:34,211,238; }
.pad-risk{ --pad-accent:#fb923c; --pad-rgb:251,146,60; }

.pad-creativity{ --pad-accent:#facc15; --pad-rgb:250,204,21; }
.pad-entertainment{ --pad-accent:#ec4899; --pad-rgb:236,72,153; }
.pad-travel{ --pad-accent:#3b82f6; --pad-rgb:59,130,246; }
.pad-personal-growth{ --pad-accent:#8b5cf6; --pad-rgb:139,92,246; }

.pad-patterns{ --pad-accent:#ffb86b; --pad-rgb:255,184,107; }
.pad-attention{ --pad-accent:#38bdf8; --pad-rgb:56,189,248; }
.pad-reputation{ --pad-accent:#c084fc; --pad-rgb:192,132,252; }
.pad-decisions{ --pad-accent:#f472b6; --pad-rgb:244,114,182; }

/* RESPONSIVE */

@media (max-width:980px){
  .category-panel .pad-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  #subcategoryGrid,
  #moveGrid{
    grid-template-columns:repeat(3, minmax(0, 1fr));
  }

  .result-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}

@media (max-width:720px){
  #subcategoryGrid,
  #moveGrid{
    grid-template-columns:1fr;
  }

  #subcategoryGrid .pad,
  #moveGrid .pad{
    min-height:auto;
    height:auto;
  }
}

@media (max-width:620px){
  .app-shell{
    width:min(100% - 22px, 1180px);
    padding:18px 0 46px;
  }

  .hero,
  .panel,
  .result-panel{
    padding:18px;
    border-radius:24px;
  }

  .hero{
    min-height:210px;
  }

  .category-panel .pad-grid{
    grid-template-columns:1fr;
  }

  .category-panel .pad{
    min-height:166px;
    height:166px;
  }

  .section-head{
    align-items:flex-start;
    flex-direction:column;
  }

  .stage-head{
    flex-direction:row;
    align-items:flex-start;
  }

  .result-top{
    padding-right:0;
    padding-top:50px;
  }

  .result-grid{
    grid-template-columns:1fr;
  }

  .result-card{
    min-height:auto;
  }
}