/* ===================================================================
   MAXIM KUSTOV — RESUME & PORTFOLIO
   Design System: Google Material Design 3 (MD3) Expressive
   Pure CSS • Tokens • Tonal Surfaces • Rounded Corners • Responsive
   =================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&family=Oswald:wght@600;700&family=Roboto:wght@400;500;700&display=swap');

:root {
  /* MD3 Color Scheme (Seed: Signal Ural Vermilion / Crimson) */
  --md-sys-color-primary: #C0000B;
  --md-sys-color-on-primary: #FFFFFF;
  --md-sys-color-primary-container: #FFDAD4;
  --md-sys-color-on-primary-container: #410001;

  --md-sys-color-secondary: #775651;
  --md-sys-color-on-secondary: #FFFFFF;
  --md-sys-color-secondary-container: #FFDAD4;
  --md-sys-color-on-secondary-container: #2C1512;

  --md-sys-color-tertiary: #705C2E;
  --md-sys-color-on-tertiary: #FFFFFF;
  --md-sys-color-tertiary-container: #FBDFA6;
  --md-sys-color-on-tertiary-container: #251A00;

  /* Surfaces & Containers */
  --md-sys-color-surface: #FCF8F8;
  --md-sys-color-surface-dim: #DED8D7;
  --md-sys-color-surface-bright: #FCF8F8;
  --md-sys-color-surface-container-lowest: #FFFFFF;
  --md-sys-color-surface-container-low: #F7F2F2;
  --md-sys-color-surface-container: #F1ECEC;
  --md-sys-color-surface-container-high: #EBE6E6;
  --md-sys-color-surface-container-highest: #E5E1E0;

  --md-sys-color-on-surface: #201A19;
  --md-sys-color-on-surface-variant: #534341;

  --md-sys-color-outline: #857370;
  --md-sys-color-outline-variant: #D8C2BE;

  /* Inverse */
  --md-sys-color-inverse-surface: #362F2E;
  --md-sys-color-inverse-on-surface: #FBEEED;
  --md-sys-color-inverse-primary: #FFB4A8;

  /* Brand Accents */
  --brand-signal-orange: #FF5C00;
  --brand-telegram: #2AABEE;
  --brand-max: #7B2CBF;
  --brand-vk: #0077FF;

  /* MD3 Shape Corner Tokens */
  --md-sys-shape-corner-none: 0px;
  --md-sys-shape-corner-extra-small: 4px;
  --md-sys-shape-corner-small: 8px;
  --md-sys-shape-corner-medium: 12px;
  --md-sys-shape-corner-large: 16px;
  --md-sys-shape-corner-extra-large: 28px;
  --md-sys-shape-corner-full: 9999px;

  /* MD3 Typography Tokens */
  --md-sys-font-brand: 'Oswald', -apple-system, sans-serif;
  --md-sys-font-plain: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --md-sys-font-code: 'JetBrains Mono', monospace;

  /* MD3 Elevation Tonal Shadows */
  --md-sys-elevation-0: none;
  --md-sys-elevation-1: 0px 1px 3px 1px rgba(0, 0, 0, 0.08), 0px 1px 2px 0px rgba(0, 0, 0, 0.04);
  --md-sys-elevation-2: 0px 2px 6px 2px rgba(0, 0, 0, 0.08), 0px 1px 2px 0px rgba(0, 0, 0, 0.04);
  --md-sys-elevation-3: 0px 4px 12px 3px rgba(0, 0, 0, 0.08), 0px 1px 3px 0px rgba(0, 0, 0, 0.04);

  /* Layout */
  --container-max: 1280px;
  --header-height: 64px;

  /* MD3 Motion (Spring & Emphasized Transitions) */
  --md-sys-motion-easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
  --md-sys-motion-easing-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1);
  --md-sys-motion-duration-short: 200ms;
  --md-sys-motion-duration-medium: 350ms;
  --md-sys-motion-duration-long: 500ms;
}

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

html {
  font-size: 16px;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + 24px);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--md-sys-font-plain);
  background-color: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
  line-height: 1.6;
  overflow-x: hidden;
  position: relative;
  min-height: 100vh;
}

a {
  color: inherit;
  text-decoration: none;
  transition: opacity var(--md-sys-motion-duration-short) ease;
}

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

button {
  font-family: inherit;
  border: none;
  background: none;
  cursor: pointer;
  outline: none;
}

.container {
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: 32px;
  padding-right: 32px;
}

@media (max-width: 768px) {
  .container {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* ===================================================================
   SECTION COMMONS (MD3 Adaptive Layout)
   =================================================================== */

.section {
  position: relative;
  padding-top: 72px;
  padding-bottom: 72px;
}

@media (max-width: 768px) {
  .section {
    padding-top: 48px;
    padding-bottom: 48px;
  }
}

/* Section Header */
.section-header {
  margin-bottom: 40px;
}

.section-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
  padding: 6px 14px;
  border-radius: var(--md-sys-shape-corner-small);
  font-family: var(--md-sys-font-plain);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.section-title {
  font-family: var(--md-sys-font-brand);
  font-size: clamp(2rem, 3.8vw, 3rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--md-sys-color-on-surface);
  margin-bottom: 12px;
}

.section-lead {
  font-size: 1.05rem;
  color: var(--md-sys-color-on-surface-variant);
  max-width: 680px;
  line-height: 1.6;
}

/* MD3 Buttons (Interactive Physics, Shimmer & Ripple Touch) */
.md3-btn-filled {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
  padding: 11px 26px;
  border-radius: var(--md-sys-shape-corner-full);
  font-family: var(--md-sys-font-plain);
  font-size: 0.92rem;
  font-weight: 600;
  box-shadow: 0 4px 14px rgba(192, 0, 11, 0.28);
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.22s cubic-bezier(0.16, 1, 0.3, 1),
              background-color 0.2s ease;
  overflow: hidden;
  cursor: pointer;
  user-select: none;
}

.md3-btn-filled::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.28), transparent);
  transform: skewX(-20deg);
  transition: none;
  pointer-events: none;
}

.md3-btn-filled:hover {
  box-shadow: 0 8px 24px rgba(192, 0, 11, 0.42);
  transform: translateY(-2px);
}

.md3-btn-filled:hover::after {
  left: 140%;
  transition: left 0.75s ease-in-out;
}

.md3-btn-filled:active {
  transform: translateY(1px) scale(0.96) !important;
  box-shadow: 0 2px 8px rgba(192, 0, 11, 0.3) !important;
}

.md3-btn-filled svg {
  transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.md3-btn-filled:hover svg {
  transform: translateX(4px);
}

.md3-btn-outlined {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: transparent;
  color: var(--md-sys-color-primary);
  border: 1.5px solid var(--md-sys-color-outline-variant);
  padding: 10px 22px;
  border-radius: var(--md-sys-shape-corner-full);
  font-family: var(--md-sys-font-plain);
  font-size: 0.92rem;
  font-weight: 600;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
  user-select: none;
}

.md3-btn-outlined:hover {
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
  border-color: var(--md-sys-color-primary);
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(192, 0, 11, 0.16);
}

.md3-btn-outlined:active {
  transform: translateY(1px) scale(0.96) !important;
}

.md3-btn-tonal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
  padding: 10px 22px;
  border-radius: var(--md-sys-shape-corner-full);
  font-family: var(--md-sys-font-plain);
  font-size: 0.92rem;
  font-weight: 600;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
  user-select: none;
}

.md3-btn-tonal:hover {
  background: var(--md-sys-color-surface-container-high);
  transform: translateY(-2px);
  box-shadow: var(--md-sys-elevation-2);
}

.md3-btn-tonal:active {
  transform: translateY(1px) scale(0.96) !important;
}

/* MD3 Chips */
.md3-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--md-sys-color-surface-container-low);
  color: var(--md-sys-color-on-surface);
  border: 1px solid var(--md-sys-color-outline-variant);
  padding: 6px 14px;
  border-radius: var(--md-sys-shape-corner-small);
  font-size: 0.82rem;
  font-weight: 500;
}

.md3-chip--primary {
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
  border-color: transparent;
}