:root {
  --color-bg: #050816;
  --color-bg-alt: #0b1020;
  --color-surface: #111827;
  --color-primary: #eab308;
  --color-primary-soft: rgba(234, 179, 8, 0.12);
  --color-accent: #f97316;
  --color-text: #f9fafb;
  --color-muted: #9ca3af;
  --shadow-soft: 0 18px 45px rgba(0, 0, 0, 0.55);
  --radius-lg: 18px;
  --radius-full: 999px;
}

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

html,
body {
  margin: 0;
  padding: 0;
}

body {
  min-height: 100vh;
  font-family: 'Montserrat', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #ffffff;
  color: #111827;
}

a {
  color: var(--color-primary);
  text-decoration: none;
}

a:hover:not(.btn-primary) {
  color: var(--color-accent);
}

img {
  max-width: 100%;
  display: block;
}

.container {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.section {
  padding: 4rem 0;
}

.section h1,
.section h2 {
  margin: 0 0 1.5rem;
}

.section p {
  margin: 0 0 1rem;
  line-height: 1.7;
  color: var(--color-muted);
}

.btn-primary {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.9rem 1.9rem 0.9rem 2.1rem;
  border-radius: 999px;
  border: 1px solid #0b1220;
  background: linear-gradient(180deg, #1a2236 0%, #0f172a 100%);
  color: #ffffff;
  font-weight: 650;
  letter-spacing: 0.04em;
  box-shadow: 0 8px 20px rgba(15,23,42,0.25), 0 2px 6px rgba(0,0,0,0.12);
  transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 120ms ease;
  overflow: hidden;
}

.btn-primary::before {
  content: "";
  width: 18px; height: 18px;
  flex: 0 0 auto;
  background-repeat: no-repeat;
  background-size: 18px 18px;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M20.52 3.48A11.84 11.84 0 0012.05 0C5.59 0 .34 5.25.34 11.72c0 2.07.54 4.03 1.56 5.78L0 24l6.69-1.75a11.67 11.67 0 005.36 1.36h.01c6.46 0 11.71-5.25 11.71-11.72 0-3.13-1.22-6.07-3.25-8.11zM12.06 21.3h-.01a9.6 9.6 0 01-4.9-1.34l-.35-.2-3.97 1.04 1.06-3.87-.23-.4a9.55 9.55 0 01-1.43-5.07c0-5.31 4.33-9.63 9.65-9.63 2.58 0 5 1.01 6.82 2.84a9.56 9.56 0 012.83 6.8c0 5.31-4.33 9.63-9.67 9.63zm5.32-7.2c-.29-.15-1.7-.84-1.96-.94-.26-.1-.45-.15-.64.15-.19.29-.74.94-.9 1.13-.17.2-.33.22-.62.07-.29-.15-1.22-.45-2.33-1.42-.86-.76-1.44-1.7-1.61-1.98-.17-.29-.02-.45.13-.59.13-.13.29-.33.43-.49.15-.17.2-.29.29-.48.1-.2.05-.36-.02-.51-.07-.15-.64-1.55-.88-2.13-.23-.56-.47-.48-.64-.49-.16-.01-.36-.01-.55-.01-.2 0-.51.07-.78.36-.26.29-1.02 1-1.02 2.43 0 1.44 1.04 2.83 1.18 3.02.15.2 2.05 3.13 4.96 4.39.69.3 1.22.48 1.63.62.68.22 1.3.19 1.79.11.55-.08 1.7-.69 1.94-1.36.24-.67.24-1.24.17-1.36-.07-.11-.26-.18-.55-.33z'/%3E%3C/svg%3E");
}

.btn-primary::after {
  content: "";
  position: absolute;
  inset: auto -30% 0 auto;
  top: 0;
  height: 180%; width: 40%;
  background: linear-gradient(120deg, rgba(255,255,255,0.0) 0%, rgba(255,255,255,0.35) 45%, rgba(255,255,255,0.0) 100%);
  transform: translateX(-140%) rotate(12deg);
  transition: transform 600ms ease;
}

.btn-primary:hover {
  background: linear-gradient(180deg, #1d2740 0%, #0b1220 100%);
  border-color: #0b1220;
  box-shadow: 0 12px 28px rgba(15,23,42,0.28), 0 4px 10px rgba(0,0,0,0.14);
  transform: translateY(-1px);
  color: #ffffff;
}

.btn-primary:hover::after { transform: translateX(160%) rotate(12deg); }

.btn-primary:active { transform: translateY(0); box-shadow: 0 6px 16px rgba(15,23,42,0.2); }
.btn-primary:focus-visible { outline: 3px solid rgba(34,197,94,0.35); outline-offset: 2px; }

@media (max-width: 768px) {
  .section {
    padding: 3rem 0;
  }

  .container {
    padding: 0 1.25rem;
  }
}