/*
  Copyright (c) 2011 Samil Lama
  All rights reserved.

  This stylesheet and related design assets are proprietary unless otherwise stated.
  Unauthorized copying, modification, distribution, or reuse is prohibited
  without prior written permission.
*/

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  background: #0b0f14;
  color: #d1d5db;
  font-family: 'Inter', sans-serif;
  overflow-x: hidden;
}

/* background grid */
.grid-bg {
  position: fixed;
  inset: 0;
  z-index: -2;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(circle at center, black 45%, transparent 100%);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 20% 15%, rgba(59, 130, 246, 0.10), transparent 30%),
    radial-gradient(circle at 80% 25%, rgba(59, 130, 246, 0.06), transparent 28%);
  pointer-events: none;
}

/* nav */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(11, 15, 20, 0.72);
  backdrop-filter: blur(10px);
}

.brand {
  display: flex;
  align-items: center;
}

.brand-name.main {
  font-family: 'Space Grotesk', sans-serif;
  color: #f8fafc;
  font-size: 0.95rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
}

/* nav links */
.nav nav {
  display: flex;
  gap: 24px;
}

.nav nav a {
  position: relative;
  text-decoration: none;
  color: #cbd5e1;
  font-size: 0.84rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: color 0.25s ease, opacity 0.25s ease;
}

.nav nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 0%;
  height: 1px;
  background: #60a5fa;
  transition: width 0.25s ease;
}

.nav nav a:hover {
  color: #60a5fa;
}

.nav nav a:hover::after {
  width: 100%;
}

/* layout */
.container {
  max-width: 820px;
  margin: 0 auto;
  padding: 36px 32px 72px;
}

/* hero */
.hero {
  min-height: auto;
  max-width: 640px;
  padding-top: 40px;
  margin-bottom: 12px;
}

.hero h1 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(2.1rem, 4vw, 3rem);
  line-height: 1.15;
  letter-spacing: -0.035em;
  font-weight: 500;
  color: #f8fafc;
  margin-bottom: 18px;
}

.subtitle {
  max-width: 580px;
  font-size: 1rem;
  line-height: 1.75;
  color: #94a3b8;
  margin-bottom: 16px;
}

.eyebrow {
  font-size: 0.82rem;
  color: #64748b;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 26px;
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

.cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  text-decoration: none;
  color: #93c5fd;
  border: 1px solid rgba(96, 165, 250, 0.55);
  background: rgba(59, 130, 246, 0.04);
  padding: 13px 24px;
  border-radius: 10px;
  transition:
    transform 0.25s ease,
    border-color 0.25s ease,
    background 0.25s ease,
    box-shadow 0.25s ease;
}

.cta-btn:hover {
  transform: translateY(-1px);
  border-color: rgba(96, 165, 250, 0.9);
  background: rgba(59, 130, 246, 0.08);
  box-shadow: 0 0 0 6px rgba(59, 130, 246, 0.05);
}

/* sections */
.section {
  margin-top: 88px;
}

.section-divided {
  position: relative;
  padding-top: 28px;
}

.section-divided::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: min(100%, 720px);
  height: 1px;
  background: linear-gradient(
    90deg,
    rgba(148, 163, 184, 0.18) 0%,
    rgba(148, 163, 184, 0.08) 35%,
    rgba(148, 163, 184, 0.02) 100%
  );
}

.section-title {
  font-family: 'Space Grotesk', sans-serif;
  margin-bottom: 20px;
  color: #94a3b8;
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
}

/* cards */
.cards {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.card {
  padding: 24px 24px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.06);
  transition:
    transform 0.28s ease,
    border-color 0.28s ease,
    background 0.28s ease,
    box-shadow 0.28s ease;
}

.card:hover {
  transform: translateY(-2px);
  background: rgba(59, 130, 246, 0.05);
  border-color: rgba(96, 165, 250, 0.28);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.18);
}

.card h3 {
  font-family: 'Space Grotesk', sans-serif;
  color: #f1f5f9;
  font-size: 1.18rem;
  font-weight: 500;
  margin-bottom: 10px;
}

.card p {
  color: #94a3b8;
  max-width: 720px;
  line-height: 1.75;
}

/* about */
.about p {
  max-width: 620px;
  color: #94a3b8;
  line-height: 1.9;
  font-size: 1rem;
}

/* contact */
.contact-copy {
  max-width: 560px;
  color: #94a3b8;
  line-height: 1.85;
  margin-bottom: 18px;
}

/* footer */
.footer {
  margin-top: 96px;
  padding-top: 4px;
  text-align: center;
}

.socials {
  display: flex;
  justify-content: center;
  gap: 30px;
  flex-wrap: wrap;
}

.socials a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
  text-decoration: none;
  transition: color 0.25s ease, transform 0.25s ease;
}

.socials a:hover {
  color: #60a5fa;
  transform: translateY(-1px);
}

.socials svg {
  width: 30px;
  height: 30px;
  fill: currentColor;
  display: block;
}

.year {
  margin-top: 18px;
  color: #64748b;
  font-size: 0.82rem;
}

/* reveal animation */
.reveal {
  opacity: 0;
  will-change: opacity, transform, filter;
}

.reveal-soft {
  transform: translateY(16px);
  filter: blur(3px);
  transition:
    opacity 0.8s ease,
    transform 0.8s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.8s ease;
}

.reveal-card {
  transform: translateY(20px) scale(0.985);
  filter: blur(4px);
  transition:
    opacity 0.85s ease,
    transform 0.85s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.85s ease;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

.delay-1 {
  transition-delay: 0.05s;
}

.delay-2 {
  transition-delay: 0.12s;
}

.delay-3 {
  transition-delay: 0.19s;
}

/* responsive */
@media (max-width: 768px) {
  .nav {
    padding: 18px 20px;
    gap: 16px;
  }

  .brand-name.main {
    letter-spacing: 0.12em;
    font-size: 0.84rem;
  }

  .nav nav {
    gap: 14px;
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .nav nav a {
    font-size: 0.76rem;
    letter-spacing: 0.12em;
  }

  .container {
    padding: 32px 20px 64px;
  }

  .hero {
    max-width: 100%;
    padding-top: 26px;
  }

  .hero h1 {
    font-size: clamp(1.9rem, 8vw, 2.5rem);
    line-height: 1.18;
  }

  .subtitle {
    font-size: 0.98rem;
    line-height: 1.7;
  }

  .eyebrow {
    font-size: 0.76rem;
    line-height: 1.6;
  }

  .hero-actions {
    gap: 14px;
  }

  .cta-btn {
    width: 100%;
    justify-content: center;
    padding: 13px 18px;
  }

  .section {
    margin-top: 72px;
  }

  .section-divided {
    padding-top: 24px;
  }

  .card {
    padding: 22px;
  }

  .card h3 {
    font-size: 1.08rem;
  }

  .about p,
  .contact-copy {
    max-width: 100%;
  }

  .socials {
    gap: 24px;
  }

  .socials svg {
    width: 28px;
    height: 28px;
  }

  .delay-1,
  .delay-2,
  .delay-3 {
    transition-delay: 0s;
  }
}

@media (max-width: 560px) {
  .nav {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .nav nav {
    width: auto;
    justify-content: flex-end;
    gap: 12px;
  }

  .nav nav a {
    font-size: 0.7rem;
    letter-spacing: 0.08em;
  }

  .brand-name.main {
    font-size: 0.8rem;
    letter-spacing: 0.1em;
  }

  .footer {
    margin-top: 84px;
  }

  .socials {
    gap: 20px;
  }

  .socials svg {
    width: 26px;
    height: 26px;
  }
}

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

  .reveal,
  .reveal-soft,
  .reveal-card,
  .delay-1,
  .delay-2,
  .delay-3,
  .cta-btn,
  .card,
  .nav nav a,
  .socials a {
    transition: none !important;
    animation: none !important;
    transform: none !important;
    filter: none !important;
    opacity: 1 !important;
  }
}