/* ============================================================
   SoftwareDevCo — Base Styles

   Visual direction:
   - Premium black background
   - Restrained metallic details
   - Chrome typography
   - Subtle engineering grid
   ============================================================ */


/* ============================================================
   VARIABLES
   ============================================================ */

:root {
  --bg: #050505;

  --ink: #ededed;
  --ink-dim: rgba(237, 237, 237, 0.55);

  --line: rgba(255, 255, 255, 0.12);

  --chrome-hi: #ffffff;
  --chrome-mid: #b9bcc2;
  --chrome-lo: #6f7278;

  --font-display:
    "Space Grotesk",
    Arial,
    sans-serif;

  --font-mono:
    "JetBrains Mono",
    "Courier New",
    monospace;
}


/* ============================================================
   RESET
   ============================================================ */

* {
  margin: 0;
  padding: 0;

  box-sizing: border-box;
}


html {
  width: 100%;
  min-height: 100%;

  scroll-behavior: smooth;

  background: var(--bg);
}


body {
  width: 100%;
  min-height: 100%;

  overflow-x: hidden;

  background: var(--bg);
  color: var(--ink);

  font-family: var(--font-display);

  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}


/* Prevent scrolling while the loading screen is active */

body.is-loading {
  overflow: hidden;
}


img {
  max-width: 100%;
}


a {
  -webkit-tap-highlight-color: transparent;
}


::selection {
  background: rgba(255, 255, 255, 0.9);
  color: #050505;
}


/* ============================================================
   MAIN WEBSITE
   ============================================================ */

.site {
  position: relative;

  width: 100%;
  min-height: 100vh;
}


/* ============================================================
   HERO
   ============================================================ */

.hero {
  position: relative;

  display: flex;
  align-items: center;

  width: 100%;

  min-height: 100vh;
  min-height: 100svh;

  overflow: hidden;

  background:
    radial-gradient(
      1200px 600px at 70% -10%,
      rgba(255, 255, 255, 0.05),
      transparent 60%
    ),
    var(--bg);
}


/* ============================================================
   ENGINEERING GRID
   ============================================================ */

.grid-lines {
  position: absolute;
  inset: 0;

  background-image:
    linear-gradient(
      var(--line) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      var(--line) 1px,
      transparent 1px
    );

  background-size: 25vw 25vh;

  opacity: 0.18;

  pointer-events: none;

  -webkit-mask-image:
    radial-gradient(
      ellipse at 50% 40%,
      black 30%,
      transparent 85%
    );

  mask-image:
    radial-gradient(
      ellipse at 50% 40%,
      black 30%,
      transparent 85%
    );
}


/* ============================================================
   BACKGROUND CURVES
   ============================================================ */

.curve {
  position: absolute;

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

  border-radius: 50%;

  opacity: 0.35;

  pointer-events: none;
}


.curve-one {
  top: -360px;
  right: -280px;

  width: 720px;
  height: 720px;
}


.curve-two {
  right: 230px;
  bottom: -720px;

  width: 1100px;
  height: 1100px;
}


/* ============================================================
   HERO CONTENT
   ============================================================ */

.hero-inner {
  position: relative;

  z-index: 5;

  width: 100%;
  max-width: 1120px;

  margin: 0 auto;

  padding:
    140px
    54px
    120px;
}


.hero-eyebrow {
  margin-bottom: 28px;

  color: var(--ink-dim);

  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 4px;

  text-transform: uppercase;
}


.hero-title {
  font-size: clamp(44px, 8.5vw, 108px);
  font-weight: 700;

  line-height: 1.02;
  letter-spacing: -0.02em;
}


.hero-title .line {
  display: block;

  background:
    linear-gradient(
      180deg,
      var(--chrome-hi) 0%,
      var(--chrome-mid) 55%,
      var(--chrome-lo) 100%
    );

  background-clip: text;

  color: transparent;

  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}


.hero-sub {
  max-width: 560px;

  margin-top: 34px;

  color: var(--ink-dim);

  font-size: 17px;
  line-height: 1.65;
}


/* ============================================================
   HERO ACTIONS
   ============================================================ */

.hero-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  gap: 28px;

  margin-top: 44px;
}


.btn-primary,
.btn-ghost {
  display: inline-flex;
  align-items: center;

  gap: 12px;

  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 1.6px;

  text-decoration: none;
  text-transform: uppercase;
}


/* Primary action */

.btn-primary {
  padding: 16px 28px;

  border-radius: 999px;

  background:
    linear-gradient(
      180deg,
      #ffffff,
      #c9ccd2
    );

  color: #050505;

  box-shadow:
    0 0 0
    rgba(255, 255, 255, 0);

  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}


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

  box-shadow:
    0 8px 30px
    rgba(255, 255, 255, 0.18);
}


.btn-primary span {
  transition:
    transform
    0.3s
    cubic-bezier(0.2, 0.7, 0.2, 1);
}


.btn-primary:hover span {
  transform: translate(3px, -3px);
}


/* Secondary action */

.btn-ghost {
  padding: 16px 4px;

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

  color: var(--ink);

  transition:
    border-color 0.3s ease,
    color 0.3s ease;
}


.btn-ghost:hover {
  border-color:
    rgba(255, 255, 255, 0.6);
}


/* ============================================================
   HERO FOOTER
   ============================================================ */

.hero-footer {
  position: absolute;

  left: 0;
  right: 0;
  bottom: 0;

  z-index: 5;

  display: flex;
  justify-content: space-between;

  padding:
    0
    54px
    34px;
}


.mono-tag {
  color:
    rgba(255, 255, 255, 0.35);

  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 3px;

  text-transform: uppercase;
}


/* ============================================================
   PAGE REVEAL
   ============================================================ */

.reveal {
  opacity: 0;

  transform: translateY(26px);
}


body.is-ready .reveal {
  animation:
    revealUp
    0.9s
    cubic-bezier(0.2, 0.7, 0.2, 1)
    forwards;

  animation-delay:
    var(--d, 0s);
}


@keyframes revealUp {
  to {
    opacity: 1;

    transform: translateY(0);
  }
}


/* ============================================================
   REDUCED MOTION
   ============================================================ */

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

  .reveal {
    opacity: 1;
    transform: none;
  }

  body.is-ready .reveal {
    animation: none;
  }
}