/* ============================================================
   FONTS
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,wght@0,500;1,400&family=Inter:wght@400;500&display=swap');

/* ============================================================
   CUSTOM PROPERTIES  (mobile-first base values)
   ============================================================ */
:root {
  /* Colors — light surface */
  --color-bg:               #F5F4F0;
  --color-text:             #111111;
  --color-accent:           #4D55CC;
  --color-accent-dark:      #3C3489;
  --color-accent-pale:      #EDEDFA;
  --color-text-secondary:   #888780;
  --color-text-warm:        #555450;
  --color-text-light:       #B4B2A9;
  --color-divider:          #D3D1C7;
  --color-white:            #FFFFFF;

  /* Colors — dark surfaces */
  --color-dark:             #111111;
  --color-dark-card:        #1A1A1A;
  --color-dark-border:      #2C2C2A;
  --color-footer:           #12164A;
  --color-navy:             #1C2051;
  --color-navy-card:        #252A6A;
  --color-navy-border:      rgba(255, 255, 255, 0.1);

  /* Colors — utility */
  --color-whatsapp:         #25D366;

  /* Typography — families */
  --font-heading: 'Fraunces', Georgia, serif;
  --font-body:    'Inter', system-ui, sans-serif;

  /* Typography — sizes (mobile base) */
  --text-h1:      clamp(28px, 7vw, 52px);
  --text-h2:      clamp(22px, 4vw, 34px);
  --text-h3:      18px;
  --text-body:    16px;
  --text-meta:    15px;
  --text-small:   14px;
  --text-xs:      13px;
  --text-badge:   14px;
  --text-nav:     14px;
  --text-label:   11px;

  /* Typography — weights */
  --weight-regular: 400;
  --weight-medium:  500;

  /* Typography — letter spacing */
  --ls-h1:    -1.2px;
  --ls-h2:    -0.8px;
  --ls-h3:    -0.3px;
  --ls-badge:  0.2px;
  --ls-label:  1px;

  /* Typography — line heights */
  --lh-heading: 1.12;
  --lh-snug:    1.15;
  --lh-body:    1.65;
  --lh-relaxed: 1.75;

  /* Spacing scale */
  --space-xs:   4px;
  --space-sm:   8px;
  --space-md:   16px;
  --space-lg:   24px;
  --space-xl:   40px;
  --space-2xl:  64px;
  --space-3xl:  80px;
  --space-4xl:  96px;

  /* Layout — mobile base */
  --max-width:     1100px;
  --nav-height:    56px;
  --section-pad-v: 48px;
  --section-pad-h: 16px;

  /* Border radius */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-full: 100px;

  /* Borders */
  --border-divider:    1px solid var(--color-divider);
  --border-dark:       1px solid var(--color-dark-border);
  --border-accent:     1px solid var(--color-accent);

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;

  /*
   * Safe area insets — values provided by the OS via env().
   * Requires viewport-fit=cover in the <meta viewport> tag.
   * On devices without a notch or home bar all four resolve to 0,
   * so they have no effect on regular screens.
   * Used in: .nav (top), .nav__mobile-menu (top), .container (left/right), .footer (bottom).
   */
  --safe-area-top:    env(safe-area-inset-top);
  --safe-area-right:  env(safe-area-inset-right);
  --safe-area-bottom: env(safe-area-inset-bottom);
  --safe-area-left:   env(safe-area-inset-left);
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

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

body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--weight-regular);
  line-height: var(--lh-body);
  min-height: 100dvh;
}

a {
  color: inherit;
  text-decoration: none;
}

ul, ol {
  list-style: none;
}

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

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

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
h1, h2 {
  font-family: var(--font-heading);
  font-weight: var(--weight-medium);
  line-height: var(--lh-heading);
}

h1 {
  font-size: var(--text-h1);
  letter-spacing: var(--ls-h1);
}

h2 {
  font-size: var(--text-h2);
  letter-spacing: var(--ls-h2);
  line-height: var(--lh-snug);
}

h3 {
  font-family: var(--font-heading);
  font-size: var(--text-h3);
  font-weight: var(--weight-medium);
  letter-spacing: var(--ls-h3);
  line-height: var(--lh-snug);
}

/* ============================================================
   LAYOUT
   ============================================================ */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-left:  max(var(--section-pad-h), var(--safe-area-left));
  padding-right: max(var(--section-pad-h), var(--safe-area-right));
}

section {
  padding-block: var(--section-pad-v);
}

/* ============================================================
   SHARED UTILITIES
   ============================================================ */
.section-label {
  font-family: var(--font-body);
  font-size: var(--text-label);
  font-weight: var(--weight-medium);
  color: var(--color-accent);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  margin-bottom: 12px;
}

.tag {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-body);
  font-size: var(--text-badge);
  font-weight: var(--weight-medium);
  border-radius: var(--radius-full);
  padding: 3px 10px;
  white-space: nowrap;
}

.tag--accent {
  color: var(--color-accent-dark);
  background: var(--color-accent-pale);
  border: 0.5px solid var(--color-accent);
}

.tag--neutral {
  color: var(--color-text-warm);
  background: var(--color-bg);
  border: 0.5px solid var(--color-divider);
}

.tag--neutral-sm {
  color: var(--color-text-secondary);
  background: var(--color-bg);
  border: 0.5px solid var(--color-divider);
  font-size: 10px;
}

.deliverable {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  background: var(--color-accent-pale);
  border-radius: var(--radius-full);
  font-size: var(--text-badge);
  font-weight: var(--weight-medium);
  color: var(--color-accent);
}

/* ============================================================
   NAV  (mobile-first: hamburger visible, links hidden)
   ============================================================ */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-bg);
  border-bottom: var(--border-divider);
  padding-top: var(--safe-area-top);
}

.nav__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: var(--nav-height);
}

.nav__logo {
  display: none;
  font-family: var(--font-heading);
  font-size: 17px;
  font-weight: var(--weight-medium);
  color: var(--color-text);
  letter-spacing: -0.2px;
  flex-shrink: 0;
}

.nav__logo-short {
  display: flex;
  flex-direction: column;
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: var(--weight-medium);
  color: var(--color-text);
  letter-spacing: -0.2px;
  line-height: 1.2;
  flex-shrink: 0;
}

.nav__logo-short__sub {
  color: var(--color-accent);
}

.nav__links {
  display: none;
  align-items: center;
  gap: 28px;
}

.nav__link {
  font-size: var(--text-nav);
  color: var(--color-text-secondary);
  transition: color var(--transition-fast);
}

.nav__link:hover {
  color: var(--color-text);
}

.nav__cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--color-whatsapp);
  color: var(--color-white);
  padding: 7px 16px;
  border-radius: var(--radius-md);
  font-size: var(--text-nav);
  font-weight: var(--weight-medium);
  transition: opacity var(--transition-fast);
}

.nav__cta:hover {
  opacity: 0.9;
}

.nav__cta svg {
  flex-shrink: 0;
}

.nav__hamburger {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 4px;
  cursor: pointer;
}

.nav__hamburger span {
  display: block;
  height: 1.5px;
  background: var(--color-text);
  border-radius: 2px;
  transition: transform var(--transition-base), opacity var(--transition-fast), width var(--transition-fast);
}

.nav__hamburger span:nth-child(1) { width: 18px; }
.nav__hamburger span:nth-child(2) { width: 18px; }
.nav__hamburger span:nth-child(3) { width: 12px; }

.nav__hamburger.is-open span:nth-child(1) {
  transform: translateY(5.5px) rotate(45deg);
  background: var(--color-accent);
  width: 18px;
}
.nav__hamburger.is-open span:nth-child(2) {
  transform: translateY(-5.5px) rotate(-45deg);
  background: var(--color-accent);
}
.nav__hamburger.is-open span:nth-child(3) {
  opacity: 0;
}

.nav__mobile-menu {
  display: none;
  position: fixed;
  inset: calc(var(--nav-height) + var(--safe-area-top)) 0 0 0;
  background: var(--color-dark);
  z-index: 99;
  flex-direction: column;
  overflow-y: auto;
}

.nav__mobile-menu.is-open {
  display: flex;
}

.nav__mobile-link {
  display: block;
  padding: 16px 24px;
  font-size: var(--text-body);
  color: var(--color-bg);
  border-bottom: 0.5px solid #1A1A1A;
  transition: color var(--transition-fast);
}

.nav__mobile-link:hover {
  color: var(--color-accent-pale);
}

.nav__mobile-cta {
  padding: 16px 24px;
}

.nav__mobile-cta a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--color-whatsapp);
  padding: 10px 18px;
  border-radius: var(--radius-md);
  font-size: var(--text-small);
  font-weight: var(--weight-medium);
  color: var(--color-white);
}

/* ----------------------------------------------------------------
   Language toggle
   ---------------------------------------------------------------- */
.nav__lang-toggle {
  display: inline-flex;
  align-items: center;
  padding: 4px 11px;
  border: 1px solid var(--color-dark-border);
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--color-text-secondary);
  font-family: var(--font-body);
  font-size: var(--text-label);
  font-weight: var(--weight-medium);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  cursor: pointer;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.nav__lang-toggle:hover {
  color: var(--color-text);
  border-color: var(--color-text-secondary);
}

.nav__lang-toggle--mobile {
  margin: 8px 24px 24px;
  border-color: rgba(255, 255, 255, 0.15);
  color: var(--color-text-secondary);
  align-self: flex-start;
}

.nav__lang-toggle--mobile:hover {
  border-color: rgba(255, 255, 255, 0.4);
  color: var(--color-bg);
}

/* ============================================================
   HERO  (mobile-first)
   ============================================================ */
.hero {
  padding-top: 40px;
  padding-bottom: var(--space-2xl);
}

.hero__content {
  max-width: 100%;
}

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 24px;
  padding: 5px 13px;
  border: 0.5px solid var(--color-accent);
  border-radius: var(--radius-full);
}

.hero__badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-accent);
  flex-shrink: 0;
}

.hero__badge-text {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--color-accent-dark);
}

.hero__title {
  margin-bottom: 22px;
}

.hero__title .accent {
  color: var(--color-accent);
  font-style: italic;
}

.hero__subtitle {
  font-size: 16px;
  color: var(--color-text-secondary);
  line-height: var(--lh-relaxed);
  margin-bottom: 32px;
}

.hero__ctas {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hero__ctas a {
  text-align: center;
}

.btn--primary {
  display: inline-block;
  background: var(--color-text);
  color: var(--color-bg);
  padding: 11px 24px;
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: var(--text-meta);
  font-weight: var(--weight-medium);
  transition: opacity var(--transition-fast);
}

.btn--primary:hover {
  opacity: 0.85;
}

.btn--secondary {
  display: inline-block;
  border: 0.5px solid var(--color-divider);
  color: var(--color-text);
  padding: 11px 24px;
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: var(--text-meta);
  transition: border-color var(--transition-fast);
}

.btn--secondary:hover {
  border-color: var(--color-text);
}

.hero__stats {
  margin-top: 40px;
  padding-top: 24px;
  border-top: var(--border-divider);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}

.hero__stat {
  padding-inline: 0;
  flex: 0 0 calc(50% - 8px);
}

.hero__stat-value {
  font-family: var(--font-heading);
  font-size: 19px;
  font-weight: var(--weight-medium);
  color: var(--color-text);
}

.hero__stat-label {
  font-size: var(--text-badge);
  color: var(--color-text-secondary);
  margin-top: 2px;
}

.hero__stat-divider {
  display: none;
}

/* ============================================================
   SERVICES  (mobile-first: 1-col)
   ============================================================ */
.services {
  background: var(--color-navy);
}

.services .section-label {
  color: var(--color-accent-pale);
}

.services__header {
  margin-bottom: 36px;
}

.services__title {
  color: var(--color-bg);
  margin-bottom: 16px;
}

.services__title .accent {
  font-style: italic;
  color: var(--color-accent-pale);
}

.services__subtitle {
  font-size: 15px;
  color: var(--color-text-light);
  line-height: var(--lh-relaxed);
  max-width: 100%;
}

.services__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-bottom: 12px;
}

.service-card {
  background: var(--color-navy-card);
  border: 0.5px solid var(--color-navy-border);
  border-radius: var(--radius-lg);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.service-card__icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  background: var(--color-accent-pale);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.service-card__icon-inner-rect {
  width: 14px;
  height: 10px;
  border: 1.5px solid var(--color-accent);
  border-radius: 2px;
}

.service-card__icon-inner-tall {
  width: 10px;
  height: 14px;
  border: 1.5px solid var(--color-accent);
  border-radius: 2px;
}

.service-card__icon-inner-circle {
  width: 14px;
  height: 14px;
  border: 1.5px solid var(--color-accent);
  border-radius: 50%;
  position: relative;
}

.service-card__icon-inner-circle::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-accent);
}

.service-card__title {
  font-size: 20px;
  font-weight: var(--weight-medium);
  color: var(--color-bg);
  margin-bottom: 8px;
  letter-spacing: var(--ls-h3);
}

.service-card__desc {
  font-size: var(--text-meta);
  color: var(--color-text-secondary);
  line-height: var(--lh-body);
}

.service-card__features {
  border-top: 0.5px solid var(--color-navy-border);
  padding-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: auto;
}

.service-card__feature {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}

.service-card__dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--color-accent);
  flex-shrink: 0;
  margin-top: 5px;
}

.service-card__feature-text {
  font-size: var(--text-small);
  color: var(--color-text-light);
  line-height: 1.4;
}

.services__cta-banner {
  background: var(--color-accent);
  border-radius: var(--radius-lg);
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

.services__cta-title {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: var(--weight-medium);
  color: var(--color-bg);
  margin-bottom: 6px;
  letter-spacing: var(--ls-h3);
}

.services__cta-desc {
  font-size: var(--text-small);
  color: var(--color-accent-pale);
  line-height: 1.5;
}

.btn--banner {
  display: inline-block;
  background: var(--color-bg);
  color: var(--color-text);
  padding: 11px 22px;
  border-radius: var(--radius-md);
  font-size: var(--text-small);
  font-weight: var(--weight-medium);
  white-space: nowrap;
  flex-shrink: 0;
  align-self: flex-start;
  transition: opacity var(--transition-fast);
}

.btn--banner:hover {
  opacity: 0.9;
}

/* ============================================================
   ABOUT  (mobile-first: 1-col)
   ============================================================ */
.about {
  background: var(--color-bg);
}

.about__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: start;
}

.about__title {
  color: var(--color-text);
  margin-bottom: 24px;
}

.about__title .accent {
  font-style: italic;
  color: var(--color-accent);
}

.about__text {
  font-size: 15px;
  color: var(--color-text-warm);
  line-height: var(--lh-relaxed);
  margin-bottom: 16px;
}

.about__cv-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-small);
  font-weight: var(--weight-medium);
  color: var(--color-text);
  border-bottom: 1px solid var(--color-accent);
  padding-bottom: 1px;
  transition: color var(--transition-fast);
}

.about__cv-link:hover {
  color: var(--color-accent);
}

.about__cards-label {
  font-size: var(--text-badge);
  font-weight: var(--weight-medium);
  color: var(--color-text-secondary);
  letter-spacing: 0.5px;
  margin-bottom: 12px;
}

.about__cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 4px;
}

.work-card {
  background: var(--color-white);
  border: 0.5px solid var(--color-divider);
  border-radius: var(--radius-md);
  padding: 16px 18px;
}

.work-card__header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

.work-card__icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-accent-pale);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.work-card__icon-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-accent);
}

.work-card__title {
  font-size: var(--text-meta);
  font-weight: var(--weight-medium);
  color: var(--color-text);
  font-family: var(--font-body);
  letter-spacing: 0;
  line-height: var(--lh-body);
}

.work-card__desc {
  font-size: var(--text-small);
  color: var(--color-text-secondary);
  line-height: 1.5;
  padding-left: 38px;
}

/* ============================================================
   PROJECTS  (mobile-first: 1-col)
   ============================================================ */
.projects {
  background: var(--color-bg);
}

.projects__header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 36px;
}

.projects__title {
  color: var(--color-text);
}

.projects__title .accent {
  font-style: italic;
  color: var(--color-accent);
}

.projects__github-link {
  font-size: var(--text-small);
  font-weight: var(--weight-medium);
  color: var(--color-accent);
  border-bottom: 1px solid var(--color-accent);
  padding-bottom: 1px;
  white-space: nowrap;
  transition: opacity var(--transition-fast);
}

.projects__github-link:hover {
  opacity: 0.8;
}

.projects__list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.project-card {
  background: var(--color-white);
  border: 0.5px solid var(--color-divider);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.project-card__header {
  background: var(--color-accent-pale);
  padding: 20px 20px 18px;
  border-bottom: 0.5px solid var(--color-divider);
}

.project-card__meta {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
}

.project-card__gh-link {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--color-accent);
  transition: opacity var(--transition-fast);
}

.project-card__gh-link:hover {
  opacity: 0.8;
}

.project-card__name {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: var(--weight-medium);
  color: var(--color-text);
  letter-spacing: -0.5px;
  margin-bottom: 4px;
}

.project-card__tagline {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--color-accent);
  margin-bottom: 14px;
}

.project-card__desc {
  font-size: var(--text-meta);
  color: var(--color-text-warm);
  line-height: var(--lh-relaxed);
  margin-bottom: 20px;
}

.project-card__features {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.project-card__feature {
  background: var(--color-white);
  border: 0.5px solid var(--color-divider);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  display: flex;
  gap: 8px;
  align-items: flex-start;
}

.project-card__feature-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-accent);
  flex-shrink: 0;
  margin-top: 4px;
}

.project-card__feature-text {
  font-size: var(--text-badge);
  color: var(--color-text-warm);
  line-height: 1.4;
}

.project-card__footer {
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.project-card__tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.project-card__date {
  font-size: var(--text-badge);
  color: var(--color-text-secondary);
}

.project-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.project-mini {
  background: var(--color-white);
  border: 0.5px solid var(--color-divider);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.project-mini__body {
  padding: 20px 20px 16px;
  border-bottom: 0.5px solid var(--color-divider);
}

.project-mini__meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}

.project-mini__name {
  font-size: 18px;
  letter-spacing: var(--ls-h3);
  margin-bottom: 8px;
}

.project-mini__desc {
  font-size: var(--text-small);
  color: var(--color-text-warm);
  line-height: var(--lh-body);
}

.project-mini__footer {
  padding: 12px 20px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}

.project-coming {
  background: var(--color-white);
  border: 0.5px dashed var(--color-divider);
  border-radius: var(--radius-lg);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.project-coming__title {
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: var(--weight-medium);
  color: var(--color-text-secondary);
  letter-spacing: var(--ls-h3);
  margin-bottom: 6px;
}

.project-coming__desc {
  font-size: var(--text-small);
  color: var(--color-text-light);
  line-height: 1.5;
}

.project-coming__icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 0.5px dashed var(--color-divider);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 20px;
  color: var(--color-divider);
  line-height: 1;
}

/* ============================================================
   STACK  (mobile-first)
   ============================================================ */
.stack {
  background: var(--color-accent-pale);
}

.stack__header {
  margin-bottom: 36px;
}

.stack__title {
  color: var(--color-text);
}

.stack__title .accent {
  font-style: italic;
  color: var(--color-accent);
}

.stack__tech-table {
  background: var(--color-bg);
  border: 0.5px solid var(--color-divider);
  border-radius: var(--radius-lg);
  padding: 20px;
  margin-bottom: 16px;
}

.stack__table-label {
  font-size: var(--text-badge);
  font-weight: var(--weight-medium);
  color: var(--color-text-secondary);
  letter-spacing: 0.5px;
  margin-bottom: 20px;
}

.stack__rows {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.stack__row {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.stack__row-label {
  font-size: var(--text-badge);
  color: var(--color-text-secondary);
  flex-shrink: 0;
  line-height: 1.4;
}

.stack__row-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.stack__divider {
  height: 0.5px;
  background: var(--color-divider);
}

.stack__secondary {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.stack__panel {
  background: var(--color-bg);
  border: 0.5px solid var(--color-divider);
  border-radius: var(--radius-lg);
  padding: 24px;
}

.stack__panel-label {
  font-size: var(--text-badge);
  font-weight: var(--weight-medium);
  color: var(--color-text-secondary);
  letter-spacing: 0.5px;
  margin-bottom: 20px;
}

.stack__items {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.stack__item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.stack__item-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-accent);
  flex-shrink: 0;
  margin-top: 5px;
}

.stack__item-title {
  font-size: var(--text-meta);
  font-weight: var(--weight-medium);
  color: var(--color-text);
  margin-bottom: 3px;
}

.stack__item-desc {
  font-size: var(--text-small);
  color: var(--color-text-secondary);
  line-height: 1.5;
}

/* ============================================================
   PROCESS  (mobile-first)
   ============================================================ */
.process {
  background: var(--color-bg);
}

.process__header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 40px;
}

.process__title {
  color: var(--color-text);
}

.process__title .accent {
  font-style: italic;
  color: var(--color-accent);
}

.process__subtitle {
  font-size: var(--text-meta);
  color: var(--color-text-secondary);
  text-align: left;
  max-width: 100%;
  line-height: 1.5;
}

.process__steps {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.step {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  padding-bottom: 28px;
}

.step:last-child {
  padding-bottom: 0;
}

.step__track {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
}

.step__circle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.step__circle--dark {
  background: var(--color-dark);
}

.step__circle--accent {
  background: var(--color-accent);
}

.step__circle--final {
  background: var(--color-dark);
  border: 2px solid var(--color-accent);
}

.step__number {
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: var(--weight-medium);
  color: var(--color-bg);
}

.step__line {
  width: 0.5px;
  background: var(--color-divider);
  flex: 1;
  min-height: 28px;
  margin-top: 8px;
}

.step__body {
  padding-top: 6px;
  flex: 1;
}

.step__title {
  margin-bottom: 8px;
  letter-spacing: var(--ls-h3);
}

.step__desc {
  font-size: var(--text-meta);
  color: var(--color-text-warm);
  line-height: var(--lh-relaxed);
  margin-bottom: 12px;
}

/* ============================================================
   CONTACT  (mobile-first: centered)
   ============================================================ */
.contact {
  background: var(--color-navy);
  padding-top: var(--space-3xl);
  padding-bottom: var(--space-3xl);
}

.contact__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 560px;
  margin-inline: auto;
}

.contact .section-label {
  color: var(--color-accent-pale);
}

.contact__title {
  color: var(--color-bg);
  font-size: clamp(26px, 6vw, 42px);
  margin-bottom: 20px;
}

.contact__title .accent {
  font-style: italic;
  color: var(--color-accent-pale);
}

.contact__subtitle {
  font-size: 15px;
  color: var(--color-text-light);
  line-height: var(--lh-relaxed);
  margin-bottom: 36px;
  max-width: 400px;
}

.btn--whatsapp {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--color-whatsapp);
  color: var(--color-white);
  padding: 14px 28px;
  border-radius: var(--radius-md);
  font-size: 15px;
  font-weight: var(--weight-medium);
  margin-bottom: 36px;
  transition: opacity var(--transition-fast);
}

.btn--whatsapp:hover {
  opacity: 0.9;
}

.contact__socials-wrapper {
  width: 100%;
  border-top: 0.5px solid var(--color-navy-border);
  padding-top: 32px;
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

.social-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border: 0.5px solid var(--color-navy-border);
  border-radius: var(--radius-md);
  background: var(--color-navy-card);
  font-size: var(--text-small);
  color: var(--color-text-light);
  transition: border-color var(--transition-fast), color var(--transition-fast);
}

.social-link:hover {
  border-color: var(--color-text-secondary);
  color: var(--color-bg);
}

/* ============================================================
   FOOTER  (mobile-first: stacked)
   ============================================================ */
.footer {
  background: var(--color-footer);
  padding-block: 24px;
  padding-bottom: calc(24px + var(--safe-area-bottom));
  border-top: 0.5px solid var(--color-dark-card);
}

.footer__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.footer__brand {
  display: flex;
  align-items: center;
  gap: 16px;
}

.footer__name {
  font-family: var(--font-heading);
  font-size: var(--text-meta);
  font-weight: var(--weight-medium);
  color: var(--color-bg);
  letter-spacing: -0.2px;
}

.footer__year {
  font-size: var(--text-xs);
  color: var(--color-text-warm);
}

.footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.footer__link {
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  transition: color var(--transition-fast);
}

.footer__link:hover {
  color: var(--color-text-secondary);
}

/* ============================================================
   BREAKPOINT — 480px  (large phones)
   ============================================================ */
@media (min-width: 480px) {
  :root {
    --section-pad-h: 20px;
    --section-pad-v: 56px;
  }

  .hero__ctas {
    flex-direction: row;
  }

  .hero__ctas a {
    text-align: left;
  }

  .hero__stats {
    flex-wrap: nowrap;
    gap: 0;
    margin-top: 48px;
  }

  .hero__stat {
    padding-inline: 20px;
    flex: 1;
  }

  .hero__stat:first-child {
    padding-left: 0;
  }

  .hero__stat-divider {
    display: block;
    width: 0.5px;
    height: 32px;
    background: var(--color-divider);
    flex-shrink: 0;
  }

  .project-coming {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .project-coming__title {
    font-size: 18px;
  }
}

/* ============================================================
   BREAKPOINT — 768px  (tablet — desktop nav, multi-col layouts)
   ============================================================ */
@media (min-width: 768px) {
  :root {
    --nav-height:    64px;
    --section-pad-h: 32px;
    --section-pad-v: 64px;
    --text-h1:       clamp(36px, 5vw, 56px);
    --text-h2:       clamp(28px, 3.5vw, 40px);
    --text-h3:       20px;
    --text-body:     17px;
    --text-meta:     16px;
    --text-small:    15px;
  }

  /* Nav — show full links, hide hamburger */
  .nav__logo        { display: block; }
  .nav__logo-short  { display: none; }
  .nav__links       { display: flex; }
  .nav__hamburger   { display: none; }
  .nav__mobile-menu,
  .nav__mobile-menu.is-open { display: none !important; }

  /* Hero */
  .hero { padding-top: 72px; }
  .hero__content   { max-width: 540px; }
  .hero__badge     { margin-bottom: 28px; }
  .hero__subtitle  { margin-bottom: 36px; }

  .hero__stats   { margin-top: 52px; }
  .hero__stat    { padding-inline: 24px; }
  .hero__stat:first-child { padding-left: 0; }
  .hero__stat-value { font-size: 20px; }

  /* Services — 3-col grid */
  .services__header { margin-bottom: 48px; }
  .services__subtitle { max-width: 460px; }
  .services__grid { grid-template-columns: repeat(3, 1fr); }

  .services__cta-banner {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 28px 32px;
  }

  .services__cta-title { font-size: 25px; }
  .btn--banner { align-self: center; }

  /* About — 2-col */
  .about__grid {
    grid-template-columns: 1fr 1fr;
    gap: 64px;
  }

  /* Projects */
  .projects__header {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 48px;
  }

  .projects__github-link { align-self: flex-end; }

  .project-card__header { padding: 28px 28px 24px; }
  .project-card__name   { font-size: 26px; }

  .project-card__features { grid-template-columns: 1fr 1fr; }

  .project-card__footer {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 16px 28px;
  }

  .project-card__date { white-space: nowrap; flex-shrink: 0; }

  .project-grid { grid-template-columns: 1fr 1fr; }

  .project-mini__body   { padding: 24px 24px 20px; }
  .project-mini__footer { padding: 14px 24px; }
  .project-mini__name   { font-size: 20px; }

  /* Stack */
  .stack__header { margin-bottom: 48px; }
  .stack__tech-table { padding: 28px; }

  .stack__row {
    flex-direction: row;
    align-items: center;
    gap: 16px;
  }

  .stack__row-label { width: 90px; }
  .stack__secondary { grid-template-columns: 1fr 1fr; }

  /* Process */
  .process__header {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 56px;
  }

  .process__subtitle {
    text-align: right;
    max-width: 160px;
  }

  .step { gap: 24px; padding-bottom: 32px; }

  .step__circle { width: 40px; height: 40px; }
  .step__number { font-size: 15px; }
  .step__line   { min-height: 32px; }
  .step__body   { padding-top: 8px; }

  /* Contact */
  .contact {
    padding-top: var(--space-4xl);
    padding-bottom: var(--space-3xl);
  }

  .contact__subtitle { margin-bottom: 48px; }
  .btn--whatsapp      { margin-bottom: 48px; }

  .contact__socials-wrapper {
    padding-top: 40px;
    gap: 12px;
  }

  /* Footer */
  .footer__inner {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

  .footer__links {
    flex-wrap: nowrap;
    gap: 24px;
  }
}

/* ============================================================
   BREAKPOINT — 1024px  (desktop)
   ============================================================ */
@media (min-width: 1024px) {
  :root {
    --section-pad-h: 40px;
    --section-pad-v: 80px;
    --text-h3:       21px;
    --text-xs:       14px;
    --text-badge:    13px;
  }

  .nav__logo { font-size: clamp(17px, 1.6vw, 24px); }
}

/* ============================================================
   BREAKPOINT — 1280px  (large desktop)
   ============================================================ */
@media (min-width: 1280px) {
  :root {
    --section-pad-h: 48px;
    --section-pad-v: 96px;
    --text-h3:       22px;
    --text-body:     18px;
    --text-meta:     17px;
    --text-small:    16px;
  }
}

/* ============================================================
   BREAKPOINT — 1920px  (large screens — scaled typography)
   ============================================================ */
@media (min-width: 1920px) {
  :root {
    --text-h1:    clamp(56px, 3.5vw, 88px);
    --text-h2:    clamp(42px, 2.5vw, 62px);
    --text-h3:    26px;
    --text-body:  19px;
    --text-meta:  18px;
    --text-small: 17px;
    --text-xs:    15px;
    --text-badge: 14px;
  }

  .contact__title {
    font-size: clamp(42px, 3vw, 60px);
  }

  .hero__stat-value {
    font-size: 24px;
  }
}