/* Nexian — Roblox experience studio
   Palette: sky, baseplate and plastic-part colours.
   Everything block-shaped is a `.blk`; --unit is its footprint, --stud its stud spacing. */

@property --h { syntax: "<length>"; inherits: true; initial-value: 0px; }

:root {
  --sky: #CDE5F7;
  --sky-low: #EAF4FB;
  --page: #EFF4F8;
  --plate: #FFFFFF;
  --baseplate: #B9C3CB;
  --ink: #151A20;
  --ink-2: #59646F;
  --line: #C9D5DF;
  --line-strong: #7E8B96;
  --brick: #C4332A;
  --sun: #F5CD30;
  --field: #4E9E42;
  --studio: #0E6CB4;

  --font: "Gabarito", ui-rounded, "Segoe UI", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --wrap: min(1120px, 100% - 2.5rem);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; font-weight: 800; line-height: 1.1; letter-spacing: -.02em; }
p { margin: 0; text-wrap: pretty; }
ul, ol, dl, dd, dt, blockquote { margin: 0; padding: 0; }
li { list-style: none; }
[hidden] { display: none; }
a { color: var(--studio); }

:focus-visible { outline: 3px solid var(--studio); outline-offset: 2px; }
::selection { background: var(--sun); color: var(--ink); }

.skip {
  position: absolute; left: .75rem; top: -3.5rem; z-index: 9;
  background: var(--ink); color: #fff; padding: .6rem 1rem;
  font-weight: 600; text-decoration: none;
}
.skip:focus { top: .75rem; }

.wrap { width: var(--wrap); margin-inline: auto; }
.mono { font-family: var(--mono); font-size: .8125rem; line-height: 1.65; }

/* ---------- top bar ---------- */

.topbar {
  position: sticky; top: 0; z-index: 5;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
  background: color-mix(in srgb, var(--page) 76%, transparent);
  backdrop-filter: blur(10px) saturate(1.3);
}
.topbar__inner { display: flex; align-items: center; gap: 1.75rem; min-height: 64px; }

.brand {
  display: flex; align-items: center; gap: .55rem; margin-right: auto;
  color: var(--ink); font-size: 1.1875rem; font-weight: 800;
  letter-spacing: -.015em; text-decoration: none;
}
.brand--static { margin: 0; }
.brand__mark { width: 1.375rem; height: 1.5rem; }

.nav { display: flex; gap: 1.6rem; font-size: .9375rem; font-weight: 500; }
.nav a { color: var(--ink); text-decoration: none; }
.nav a:hover { color: var(--studio); }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .78rem 1.35rem; border: 1.5px solid var(--ink);
  background: transparent; color: var(--ink); cursor: pointer;
  font: 600 1rem/1.2 var(--font); text-decoration: none;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.btn--primary { background: var(--brick); border-color: var(--brick); color: #fff; }
.btn--primary:hover { background: #A62A21; border-color: #A62A21; }
.btn--ghost { background: var(--plate); }
.btn--ghost:hover { background: var(--ink); color: #fff; }

/* ---------- hero ---------- */

.hero { background: linear-gradient(180deg, var(--sky) 0%, var(--sky-low) 46%, #F3F7FB 100%); }

.hero__inner {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 2rem 3rem; align-items: center;
  padding-block: clamp(3rem, 7vw, 5.25rem) clamp(3.25rem, 7vw, 5.5rem);
}

.hero__title { font-size: clamp(2.5rem, 1.5rem + 4.7vw, 4.75rem); line-height: 1; max-width: 15ch; }
.hero__lead { margin-top: 1.5rem; max-width: 44ch; font-size: clamp(1.0625rem, 1rem + .4vw, 1.25rem); line-height: 1.55; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2.25rem; }
.hero__status { margin-top: 1.75rem; max-width: 46ch; color: var(--ink-2); }

/* ---------- parts, a baseplate and the blocks on it ---------- */

.scene-box { container-type: inline-size; }

.scene {
  position: relative;
  width: 9em; height: 4.1em;
  font-size: min(10.6cqw, 3.6rem);
  perspective: 900px; perspective-origin: 50% 45%;
}
.scene__grid {
  position: absolute; left: .25em; top: 2.7em; width: 0; height: 0;
  transform-style: preserve-3d;
  transform: rotateX(58deg) rotateZ(-45deg);
}

.demo { container-type: inline-size; }

.iso {
  position: relative; overflow: hidden;
  width: 6.8em; aspect-ratio: 6.8 / 3.9;
  font-size: min(14cqw, 3.2rem);
  background: linear-gradient(180deg, var(--sky) 0%, var(--sky-low) 70%, #F3F7FB 100%);
  border: 1px solid var(--line);
  perspective: 900px; perspective-origin: 50% 40%;
}
.iso__grid {
  position: absolute; left: .55em; top: 2.55em; width: 0; height: 0;
  transform-style: preserve-3d;
  transform: rotateX(58deg) rotateZ(-45deg);
}

/* `.blk` is the studded top face, lifted by --h off the baseplate.
   The two pseudo-elements are its walls: they undo that lift, then stand up
   from the base plane, so a block grows out of the ground as --h animates. */

.blk {
  --unit: 1em; --stud: .5em; --c: var(--brick); --bh: 1em; --z: 0px; --d: 0;
  --h: var(--bh);
  position: absolute; left: 50%; top: 50%;
  width: var(--unit); height: var(--unit);
  margin: calc(var(--unit) / -2) 0 0 calc(var(--unit) / -2);
  transform-style: preserve-3d;
  transform: translate3d(calc(var(--x, 0) * var(--unit)), calc(var(--y, 0) * var(--unit)), var(--z))
             translateZ(var(--h));
  background-color: var(--c);
  background-image: radial-gradient(circle at 50% 50%,
    rgba(0, 0, 0, .13) calc(var(--stud) / 6),
    transparent calc(var(--stud) / 6 + 1px));
  background-size: var(--stud) var(--stud);
  background-repeat: repeat;
  animation: blk-grow .5s cubic-bezier(.2, 1.25, .35, 1) backwards;
  animation-delay: calc(var(--d) * 65ms);
}
.blk--pad { left: 0; top: 0; margin: 0; }

/* left face */
.blk::before {
  content: ""; position: absolute; left: 0; top: 0;
  width: var(--unit); height: var(--h);
  transform-origin: 0 0;
  transform: translateZ(calc(var(--h) * -1)) rotateZ(90deg) rotateX(90deg);
  background-color: color-mix(in srgb, var(--c) 78%, #000);
}
/* right face */
.blk::after {
  content: ""; position: absolute; left: 0; top: calc(var(--unit) - var(--h));
  width: var(--unit); height: var(--h);
  transform-origin: 0 100%;
  transform: translateZ(calc(var(--h) * -1)) rotateX(-90deg);
  background-color: color-mix(in srgb, var(--c) 64%, #000);
}

@keyframes blk-grow { from { --h: 0px; } to { --h: var(--bh); } }

/* ---------- sections ---------- */

.section { padding-block: clamp(4rem, 8vw, 7rem); scroll-margin-top: 4.5rem; }
.section--end { padding-block: clamp(4rem, 8vw, 7rem) clamp(4.5rem, 9vw, 8rem); }

.title { font-size: clamp(1.75rem, 1.25rem + 2vw, 2.5rem); letter-spacing: -.03em; text-wrap: balance; }
.subtitle { font-size: 1.125rem; letter-spacing: -.01em; }
.lead { margin-top: 1.1rem; max-width: 56ch; color: var(--ink-2); text-wrap: pretty; }
.after { margin-top: 2.75rem; }

.parts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr)); gap: 1.25rem; margin-top: 2.75rem; }
.part {
  padding: 1.75rem 1.75rem 1.9rem;
  border: 1px solid var(--line); border-top: 4px solid var(--part-c);
  background: var(--plate);
}
.part--brick { --part-c: var(--brick); }
.part--field { --part-c: var(--field); }
.part__title { font-size: 1.25rem; }
.part__text { margin-top: .75rem; max-width: 52ch; color: var(--ink-2); }

.rows { margin-top: 2.75rem; }
.row { display: grid; grid-template-columns: minmax(0, 13rem) minmax(0, 1fr); gap: 1.5rem; padding-block: 1.35rem; border-top: 1px solid var(--line); }
.row:last-child { border-bottom: 1px solid var(--line); }
.row dt { font-size: 1.0625rem; font-weight: 700; }
.row dd { max-width: 62ch; color: var(--ink-2); }

.track {
  display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: .5rem;
  margin-top: 3rem; padding-top: 1.1rem;
  border-top: 2px solid var(--ink);
  font-family: var(--mono); font-size: .75rem; line-height: 1.5;
}
.track li { position: relative; }
.track li::before {
  content: ""; position: absolute; left: 0; top: -1.4rem;
  width: .5rem; height: .5rem; background: var(--ink);
}
.track__note { margin-top: 1.75rem; max-width: 52ch; color: var(--ink-2); }

.brief { margin-top: 3rem; padding-left: 1.5rem; border-left: 4px solid var(--brick); max-width: 46rem; }
.brief__lead { color: var(--ink-2); font-size: 1rem; }
.brief__quote { margin-top: .6rem; font-size: clamp(1.25rem, 1.1rem + 1.1vw, 1.75rem); font-weight: 700; line-height: 1.3; letter-spacing: -.015em; }

.demos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr)); gap: 2.5rem 1.5rem; margin-top: 2.75rem; }
.demo__title { margin-top: 1.1rem; font-size: 1.125rem; }
.demo__text { margin-top: .4rem; max-width: 40ch; color: var(--ink-2); font-size: 1rem; }

.studio { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr)); gap: 2.5rem 4rem; margin-top: 2.5rem; }
.studio__col > .rows { margin-top: 1.25rem; }
.studio__col .row { grid-template-columns: 1fr; gap: .25rem; }

/* ---------- contact ---------- */

.contact { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 2.5rem 4rem; align-items: start; }
.contact__alt { margin-top: 1.75rem; }

.form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem; }
.field { display: flex; flex-direction: column; gap: .45rem; }
.field--wide { grid-column: 1 / -1; }
.field label { font-size: .9375rem; font-weight: 600; }
.field__opt { font-weight: 400; color: var(--ink-2); }

input, select, textarea {
  width: 100%; padding: .7rem .8rem;
  border: 1px solid var(--line-strong); background: var(--plate); color: var(--ink);
  font: 400 1rem/1.5 var(--font);
}
input:hover, select:hover, textarea:hover { border-color: var(--ink); }
textarea { resize: vertical; min-height: 8rem; }

.form__foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; margin-top: .4rem; }
.form__note { max-width: 32ch; color: var(--ink-2); font-size: .875rem; }
.form__status { grid-column: 1 / -1; color: var(--ink-2); }
.form__status:empty { display: none; }

/* ---------- footer ---------- */

.footer {
  border-top: 1px solid var(--line);
  padding-block: 2.75rem 2rem;
  background: color-mix(in srgb, var(--ink) 4%, var(--page));
}
.footer__inner { display: flex; flex-wrap: wrap; gap: 1.5rem 3rem; justify-content: space-between; }
.footer__tag { margin-top: .7rem; max-width: 32ch; color: var(--ink-2); font-size: .9375rem; }
.footer__nav { display: flex; flex-wrap: wrap; gap: .5rem 1.6rem; font-size: .9375rem; }
.footer__base {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1.5rem;
  margin-top: 2.25rem; padding-top: 1.25rem;
  border-top: 1px solid var(--line); color: var(--ink-2); font-size: .875rem;
}

/* ---------- narrow ---------- */

@media (max-width: 1000px) {
  .contact { grid-template-columns: 1fr; }
  .row { grid-template-columns: 1fr; gap: .3rem; }
  .form { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  .hero__inner { grid-template-columns: 1fr; gap: 3rem; }
  .scene-box { justify-self: center; }
  .nav { display: none; }
  .track { grid-template-columns: 1fr; gap: 0; border-top: 0; padding-top: 0; font-size: .8125rem; }
  .track li { padding: .1rem 0 1rem 1.5rem; border-left: 2px solid var(--line); }
  .track li::before { left: -4px; top: .6rem; }
}

@media (max-width: 560px) {
  :root { --wrap: min(1120px, 100% - 2rem); }
  .topbar__inner { gap: .75rem; }
  .btn { padding: .7rem 1.1rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .blk { animation: none; }
}