:root {
  --panel: rgba(7, 10, 15, 0.50);
  --panel-soft: rgba(8, 11, 17, 0.72);

  --text: #f7f7f8;
  --muted: #a9acb5;

  --border: rgba(255, 255, 255, 0.13);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;

  font-family:
    Inter,
    Arial,
    sans-serif;

  color: var(--text);

  background: #090b10;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input {
  font: inherit;
}

/* PAGE */

.page {
  width: min(
    1180px,
    calc(100% - 36px)
  );

  margin: 0 auto;

  padding:
    26px
    0
    60px;

  position: relative;

  z-index: 2;
}

/* BRAND */

.branch-brand {
  display: inline-flex;

  align-items: baseline;

  gap: 10px;

  text-decoration: none;

  font-weight: 950;

  letter-spacing: 0.05em;
}

.brand-word {
  font-size:
    clamp(
      28px,
      3vw,
      44px
    );
}

.branch-letter {
  font-size:
    clamp(
      38px,
      4.5vw,
      62px
    );

  line-height: 0.8;

  font-style: italic;
}

/* HERO */

.hero {
  text-align: center;

  padding:
    34px
    10px
    26px;
}

.hero h1 {
  margin: 0;

  font-size:
    clamp(
      34px,
      5vw,
      58px
    );

  letter-spacing: -0.03em;
}

.hero p {
  max-width: 680px;

  margin:
    14px
    auto
    0;

  color: var(--muted);

  line-height: 1.65;
}

/* MAIN LAYOUT */

.layout {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    260px;

  gap: 22px;

  align-items: start;
}

/* GLASS PANELS */

.calculator,
.side-card {
  border:
    1px
    solid
    var(--border);

  background:
    var(--panel);

  backdrop-filter:
    blur(10px);

  -webkit-backdrop-filter:
    blur(10px);

  box-shadow:
    0
    18px
    55px
    rgba(0, 0, 0, 0.28);
}

.calculator {
  border-radius: 28px;

  padding: 26px;
}

/* SIDE MENU */

.side-nav {
  display: grid;

  gap: 14px;

  position: sticky;

  top: 22px;
}

.side-card {
  min-height: 82px;

  border-radius: 18px;

  padding:
    18px
    20px;

  display: flex;

  justify-content:
    space-between;

  align-items: center;

  font-weight: 850;

  letter-spacing: 0.04em;

  transition:
    transform 0.2s ease,
    background 0.2s ease,
    border-color 0.2s ease;
}

.side-card:hover {
  transform:
    translateX(4px);
}

/* FORM */

.form-grid {
  display: grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap: 16px;
}

.field {
  min-width: 0;
}

.field.full {
  grid-column:
    1 / -1;
}

.label-row {
  display: flex;

  justify-content:
    space-between;

  gap: 12px;

  align-items: center;

  margin-bottom: 8px;
}

label,
.field-label {
  font-size: 12px;

  font-weight: 900;

  letter-spacing: 0.12em;
}

.range {
  color: var(--muted);

  font-size: 11px;

  font-weight: 700;
}

/* NUMBER INPUT */

.number-control {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    44px;

  border:
    1px
    solid
    rgba(
      255,
      255,
      255,
      0.14
    );

  border-radius: 15px;

  overflow: hidden;

  background:
    rgba(
      3,
      6,
      11,
      0.82
    );

  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.number-control:focus-within {
  border-color:
    var(--accent);

  box-shadow:
    0
    0
    0
    3px
    var(--focus-ring);
}

.number-control input {
  width: 100%;

  min-width: 0;

  border: 0;

  outline: 0;

  background: transparent;

  color: white;

  padding:
    16px;

  font-size: 18px;

  appearance: textfield;

  -moz-appearance: textfield;
}

.number-control input::-webkit-inner-spin-button,
.number-control input::-webkit-outer-spin-button {
  appearance: none;

  -webkit-appearance: none;

  margin: 0;
}

/* CUSTOM ARROWS */

.steppers {
  display: grid;

  grid-template-rows:
    1fr
    1fr;

  border-left:
    1px
    solid
    var(--border);
}

.step-btn {
  border: 0;

  background:
    rgba(
      255,
      255,
      255,
      0.045
    );

  color: #d3d5dc;

  cursor: pointer;

  font-size: 11px;

  transition:
    background 0.16s ease,
    color 0.16s ease;
}

.step-btn + .step-btn {
  border-top:
    1px
    solid
    var(--border);
}

.step-btn:hover {
  background:
    var(--accent-soft);

  color: white;
}

.field-note {
  margin-top: 7px;

  color: var(--muted);

  font-size: 12px;

  line-height: 1.5;
}

/* LIVE WHR */

.live-readout {
  margin-top: 18px;

  padding: 18px;

  border-radius: 18px;

  border:
    1px
    solid
    var(--border);

  background:
    rgba(
      4,
      7,
      12,
      0.72
    );

  text-align: center;
}

.live-readout .kicker {
  color: var(--muted);

  font-size: 11px;

  font-weight: 900;

  letter-spacing: 0.15em;
}

.live-readout .value {
  margin-top: 5px;

  font-size: 38px;

  font-weight: 950;
}

/* CHECKBOX */

.checkbox-line {
  display: flex;

  align-items: center;

  gap: 11px;

  margin-top: 12px;

  cursor: pointer;
}

.checkbox-line input {
  width: 19px;

  height: 19px;

  accent-color:
    var(--accent);
}

/* PRIMARY BUTTON */

.primary-btn {
  width: 100%;

  margin-top: 22px;

  padding:
    17px
    20px;

  border:
    1px
    solid
    var(--accent-border);

  border-radius: 16px;

  background:
    linear-gradient(
      135deg,
      var(--accent-dark),
      var(--accent)
    );

  color: white;

  font-weight: 950;

  letter-spacing: 0.09em;

  cursor: pointer;

  transition:
    transform 0.2s ease,
    filter 0.2s ease;

  box-shadow:
    0
    10px
    30px
    var(--button-shadow);
}

.primary-btn:hover {
  transform:
    translateY(-2px);

  filter:
    brightness(1.07);
}

/* ERROR */

.form-error {
  display: none;

  margin-top: 13px;

  text-align: center;

  color: #ff9daa;

  font-size: 13px;

  font-weight: 700;
}

/* RESULT */

.result {
  display: none;

  margin-top: 28px;

  padding-top: 28px;

  border-top:
    1px
    solid
    var(--border);
}

.result.show {
  display: block;

  animation:
    resultOpen
    0.32s
    ease;
}

.result-head {
  text-align: center;
}

.result-kicker {
  color: var(--muted);

  font-size: 11px;

  font-weight: 900;

  letter-spacing: 0.16em;
}

/* SCORE */

.result-score {
  margin-top: 8px;

  font-size:
    clamp(
      42px,
      5.8vw,
      64px
    );

  font-weight: 950;

  letter-spacing: -0.04em;
}

.result-score small {
  font-size: 0.36em;

  color: var(--muted);
}

/* TITLE */

.result-title {
  margin-top: 5px;

  font-size: 29px;

  font-weight: 950;

  letter-spacing: 0.05em;
}

/* WORLDWIDE PANEL */

.worldwide-box {
  margin-top: 24px;

  padding:
    22px
    20px;

  border-radius: 20px;

  text-align: center;

  position: relative;

  overflow: hidden;
}

.worldwide-box::before {
  content: "";

  position: absolute;

  inset: 0;

  pointer-events: none;
}

.worldwide-label {
  position: relative;

  z-index: 1;

  font-size: 11px;

  font-weight: 900;

  letter-spacing: 0.18em;

  opacity: 0.8;
}

.worldwide-value {
  position: relative;

  z-index: 1;

  margin-top: 5px;

  font-size:
    clamp(
      38px,
      6vw,
      58px
    );

  font-weight: 950;

  letter-spacing: -0.035em;

  line-height: 1;
}

.worldwide-text {
  position: relative;

  z-index: 1;

  margin-top: 8px;

  font-size: 13px;

  font-weight: 900;

  letter-spacing: 0.16em;
}

/* SUB RESULTS */

.subgrid {
  display: grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap: 14px;

  margin-top: 20px;
}

.subcard {
  border:
    1px
    solid
    var(--border);

  border-radius: 17px;

  background:
    rgba(
      4,
      7,
      12,
      0.68
    );

  padding: 17px;

  text-align: center;
}

.subcard .name {
  color: var(--muted);

  font-size: 11px;

  font-weight: 900;

  letter-spacing: 0.12em;
}

.subcard .score {
  margin-top: 7px;

  font-size: 22px;

  font-weight: 950;
}

.subcard .title {
  margin-top: 5px;

  font-size: 15px;

  font-weight: 900;
}

/* TITLE LADDER */

.title-ladder {
  display: grid;

  grid-template-columns:
    repeat(
      5,
      1fr
    );

  gap: 8px;

  margin-top: 22px;
}

.title-chip {
  padding:
    11px
    8px;

  border-radius: 12px;

  border:
    1px
    solid
    var(--border);

  background:
    rgba(
      5,
      7,
      11,
      0.65
    );

  text-align: center;

  font-size: 12px;

  font-weight: 950;

  color: #6e717b;
}

.title-chip.active {
  border-color:
    currentColor;
}

/* ANIMATION */

@keyframes resultOpen {
  from {
    opacity: 0;

    transform:
      translateY(10px);
  }

  to {
    opacity: 1;

    transform:
      translateY(0);
  }
}

/* MOBILE */

@media (max-width: 840px) {

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

  .side-nav {
    position: static;
  }

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

  .field.full {
    grid-column: auto;
  }

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

  .title-ladder {
    grid-template-columns:
      1fr;
  }

}

@media (max-width: 520px) {

  .page {
    width:
      calc(100% - 22px);
  }

  .calculator {
    padding: 18px;
  }

  .result-title {
    font-size: 25px;
  }

}