/* ═══════════════════════════════════════════════════════════
   ViReal Studio — couche v2
   À charger APRÈS style.css :
   <link rel="stylesheet" href="style.css">
   <link rel="stylesheet" href="assets/vireal.css">
   ═══════════════════════════════════════════════════════════ */

/* ── Mise à l'échelle ─────────────────────────────────────────
   Le CSS d'origine fige tout en pixels : sur un grand écran, le
   site garde la taille qu'il a sur un portable et se perd au
   milieu du vide.

   Ici tout est exprimé en rem, et la taille de référence grandit
   avec la largeur de la fenêtre. Le site se comporte comme s'il
   zoomait : textes, marges, cartes et boutons grandissent
   ensemble, sans jamais se déformer.

   En dessous de 1500 px, rien ne change : 16 px comme partout. */

html { font-size: 16px; }

:root {
  --container: 1200px;
  --container-wide: 1240px;
  --gouttiere: clamp(1rem, 3vw, 2rem);
}

header {
  padding-inline: 0;
}

nav,
.section-container,
.footer-container {
  width: 100%;
  max-width: var(--container);
  margin-left: auto;
  margin-right: auto;
}

.works,
.hero-split {
  width: 100%;
  max-width: var(--container-wide);
  margin-left: auto;
  margin-right: auto;
}

nav,
.footer-container {
  padding-inline: var(--gouttiere);
}

:root {
  --ease: cubic-bezier(.22, 1, .36, 1);
  --fivem: #f0a500;
  --roblox: #e2231a;
  --rust: #cd412b;
  --novalife: #4ea8de;
  --minecraft: #5d9c59;
}

/* Le réglage système de réduction du mouvement est respecté partout. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Focus visible au clavier, sur tout le site. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--red-light);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ═══ Accueil en deux colonnes ════════════════════════════════
   Le texte à gauche, le serveur qui démarre à droite. La promesse
   et sa preuve dans le même écran, sans avoir à faire défiler. */

.hero-split {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  grid-template-rows: repeat(5, min-content);
  align-content: center;
  align-items: start;
  column-gap: clamp(2rem, 4vw, 4.5rem);
  row-gap: 0;
  text-align: left;
  /* Plutôt que 100vh : une hauteur qui reste confortable sur un
     portable comme sur un 34 pouces, sans écran à moitié vide. */
  min-height: clamp(35rem, 84svh, 54rem);
  padding: clamp(6.5rem, 11vh, 9rem) var(--gouttiere) clamp(3rem, 7vh, 5rem);
}

.hero-split > * { grid-column: 1; justify-self: start; }

.hero-split .hero-visual {
  grid-column: 2;
  grid-row: 1 / -1;
  align-self: center;
  justify-self: stretch;
  width: 100%;
}

.hero-split h1 {
  font-size: clamp(2.1rem, 3.6vw, 3.6rem);
  margin-bottom: 1.2rem;
  max-width: 17ch;
}

.hero-split .hero-description { margin-bottom: 2rem; max-width: 52ch; }
.hero-split .hero-actions { justify-content: flex-start; }

.hero-split .hero-stats {
  gap: 2.5rem;
  margin-top: 2.8rem;
  padding-top: 2rem;
}

.hero-split .hero-stat { text-align: left; }
.hero-split .hero-stat .number { font-size: 1.7rem; }
.hero-split .hero-stat .label { text-transform: none; letter-spacing: normal; }

@media (max-width: 900px) {
  .hero-split {
    grid-template-columns: 1fr;
    row-gap: 0;
    column-gap: 0;
    padding: 7rem var(--gouttiere) 3.5rem;
  }

  .hero-split .hero-visual {
    grid-column: 1;
    grid-row: auto;
    margin-top: 2.5rem;
  }

  .hero-split .hero-stats {
    flex-wrap: wrap;
    gap: 1.6rem 2.2rem;
  }
}

/* ═══ Console d'accueil ═══════════════════════════════════════
   Le serveur de jeu qui démarre : c'est ce que voit tout gérant
   de serveur au lancement. Un seul moment animé sur la page. */

.console {
  background: #0d0d10;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  font-family: var(--font-mono);
  font-size: .8rem;
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .9);
}

.console-bar {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .7rem 1rem;
  background: #141419;
  border-bottom: 1px solid var(--border);
}

.console-dot { width: 10px; height: 10px; border-radius: 50%; background: #2c2c34; }
.console-dot:first-child { background: #e63946; }

.console-name {
  margin-left: .6rem;
  color: var(--text-muted);
  font-size: .74rem;
}

.console-body {
  padding: 1.1rem 1.2rem;
  min-height: 13rem;
  display: flex;
  flex-direction: column;
  gap: .32rem;
  line-height: 1.7;
  color: #8ce99a;
}

.console-line { display: block; white-space: pre-wrap; word-break: break-word; }
.console-line .t { color: var(--text-muted); }
.console-line .k { color: #ff6b78; }
.console-line .v { color: #f0f0f2; }
.console-line .w { color: #ffd43b; }

.console-body::after {
  content: '';
  width: 8px;
  height: 15px;
  background: var(--red-light);
  animation: caret 1.1s steps(2) infinite;
  margin-top: .2rem;
}

@keyframes caret { 50% { opacity: 0; } }

/* ═══ Page Créations ══════════════════════════════════════════ */

.works {
  padding: 8rem var(--gouttiere) 5rem;
}

.works-head { max-width: 62ch; margin-bottom: 2.6rem; }

.works-head h1 {
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1.05;
}

.works-head p {
  color: var(--text-secondary);
  margin-top: 1rem;
  font-size: 1.05rem;
}

/* Filtres par jeu */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 2rem;
  padding-bottom: 1.6rem;
  border-bottom: 1px solid var(--border);
}

.filter {
  font: inherit;
  font-size: .88rem;
  cursor: pointer;
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: .45rem 1rem;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  transition: color .2s, border-color .2s, background .2s;
}

.filter:hover { color: var(--text-primary); border-color: var(--border-hover); }

.filter.on {
  color: var(--text-primary);
  border-color: var(--red-primary);
  background: var(--red-subtle);
}

.filter .chip { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.filter[data-filter="fivem"] .chip { background: var(--fivem); }
.filter[data-filter="roblox"] .chip { background: var(--roblox); }
.filter[data-filter="rust"] .chip { background: var(--rust); }
.filter[data-filter="novalife"] .chip { background: var(--novalife); }
.filter[data-filter="minecraft"] .chip { background: var(--minecraft); }

/* Grille */
.works-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
  gap: 1.3rem;
}

/* Une création = une ressource installable. La carte reprend
   la forme d'une entrée de resource : identifiant, version, état. */
.work {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transform: perspective(900px) rotateX(var(--rx, 0)) rotateY(var(--ry, 0));
  transition: transform .35s var(--ease), border-color .25s, box-shadow .35s;
}

.work::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 0%), rgba(230, 57, 70, .1), transparent 65%);
  opacity: 0;
  transition: opacity .35s;
  pointer-events: none;
}

.work:hover {
  border-color: var(--border-hover);
  box-shadow: 0 26px 50px -24px rgba(0, 0, 0, .8);
}

.work:hover::after { opacity: 1; }

.work-media {
  aspect-ratio: 16 / 10;
  background: linear-gradient(150deg, #1a1a20, #0f0f13);
  position: relative;
  overflow: hidden;
}

.work-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s var(--ease);
}

.work:hover .work-media img { transform: scale(1.05); }

.work-game {
  position: absolute;
  top: .8rem;
  left: .8rem;
  font-family: var(--font-mono);
  font-size: .68rem;
  padding: .25rem .6rem;
  border-radius: 6px;
  background: rgba(10, 10, 11, .82);
  backdrop-filter: blur(8px);
  border: 1px solid var(--border);
}

.work-body { padding: 1.1rem 1.2rem 1.3rem; display: flex; flex-direction: column; gap: .6rem; flex: 1; }

.work-id {
  font-family: var(--font-mono);
  font-size: .74rem;
  color: var(--text-muted);
  display: flex;
  gap: .5rem;
  align-items: center;
}

.work-id b { color: var(--red-light); font-weight: 500; }

.work h2 { font-size: 1.12rem; font-weight: 650; letter-spacing: -.015em; }
.work p { font-size: .9rem; color: var(--text-secondary); flex: 1; }

.work-specs {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  font-family: var(--font-mono);
  font-size: .7rem;
  color: var(--text-muted);
}

.work-specs span {
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: .18rem .45rem;
}

.work-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  padding-top: .9rem;
  border-top: 1px solid var(--border);
}

.work-price { font-size: 1.05rem; font-weight: 700; }
.work-price small { font-size: .72rem; font-weight: 400; color: var(--text-muted); display: block; }

.work-buy {
  font-size: .85rem;
  font-weight: 600;
  padding: .55rem 1rem;
  border-radius: 10px;
  background: var(--red-primary);
  color: #fff;
  transition: background .2s, transform .12s;
  white-space: nowrap;
}

.work-buy:hover { background: var(--red-light); }
.work-buy:active { transform: translateY(1px); }

.work-soon { background: transparent; border: 1px solid var(--border-hover); color: var(--text-secondary); }
.work-soon:hover { background: var(--surface); }

/* Compteur et états de chargement de la vitrine */
.works-compteur {
  font-family: var(--font-mono);
  font-size: .8rem;
  color: var(--text-muted);
  margin-top: .8rem;
}

.work-squelette {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  min-height: 21rem;
  background: linear-gradient(100deg, var(--bg-card) 30%, #1e1e24 50%, var(--bg-card) 70%);
  background-size: 250% 100%;
  animation: chargement 1.4s ease-in-out infinite;
}

@keyframes chargement { to { background-position: -150% 0; } }

@media (prefers-reduced-motion: reduce) {
  .work-squelette { animation: none; }
}

/* Produit sans visuel sur Tebex : initiale plutôt qu'un cadre vide. */
.work-vide {
  display: grid;
  place-items: center;
  height: 100%;
  font-family: var(--font-mono);
  font-size: 3.4rem;
  font-weight: 700;
  color: rgba(230, 57, 70, .3);
}

.work-price .work-barre {
  display: inline;
  text-decoration: line-through;
  color: var(--text-muted);
  font-weight: 400;
  margin-left: .45rem;
  font-size: .82rem;
}

/* Bloc « rien ne correspond » : une invitation, pas un cul-de-sac. */
.works-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 4rem 1.5rem;
  border: 1px dashed var(--border-hover);
  border-radius: var(--radius-lg);
}

.works-empty h2 { font-size: 1.2rem; margin-bottom: .5rem; }
.works-empty p { color: var(--text-secondary); max-width: 44ch; margin: 0 auto 1.4rem; }

/* ═══ Canaux de contact ═══════════════════════════════════════
   Remplace la liste d'icônes : chaque ligne annonce clairement
   le délai de réponse, seule info qui compte avant d'écrire. */

.channels { display: flex; flex-direction: column; gap: .7rem; margin-top: 2rem; }

.channel {
  display: grid;
  grid-template-columns: 42px 1fr auto;
  align-items: center;
  gap: 1rem;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  width: 100%;
  padding: .95rem 1.1rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  position: relative;
  overflow: hidden;
  transition: border-color .25s, transform .25s var(--ease), background .25s;
}

.channel::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--accent, var(--red-primary));
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform .3s var(--ease);
}

.channel:hover {
  border-color: var(--border-hover);
  background: var(--bg-card-hover);
  transform: translateX(3px);
}

.channel:hover::before { transform: scaleY(1); }

.channel-icon {
  width: 42px;
  height: 42px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--accent, var(--red-primary)) 14%, transparent);
  color: var(--accent, var(--red-primary));
}

.channel-icon svg { width: 20px; height: 20px; }

.channel-text { min-width: 0; }
.channel-title { font-weight: 600; font-size: .97rem; display: block; }

.channel-sub {
  font-size: .82rem;
  color: var(--text-muted);
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.channel-meta {
  font-family: var(--font-mono);
  font-size: .72rem;
  color: var(--text-muted);
  text-align: right;
  white-space: nowrap;
}

.channel-meta b { display: block; color: var(--text-secondary); font-weight: 500; }

.channel.is-copied .channel-meta::after {
  content: 'Copié';
  color: #34d399;
}

.channel.is-copied .channel-meta b { display: none; }

/* ═══ Formulaire ══════════════════════════════════════════════ */

.form-status {
  font-size: .88rem;
  margin-top: .9rem;
  padding: .7rem .9rem;
  border-radius: 10px;
  display: none;
}

.form-status.is-ok {
  display: block;
  background: rgba(52, 211, 153, .1);
  border: 1px solid rgba(52, 211, 153, .28);
  color: #a7f3d0;
}

.form-status.is-error {
  display: block;
  background: rgba(230, 57, 70, .1);
  border: 1px solid rgba(230, 57, 70, .3);
  color: #ffc9cd;
}

.field-error { font-size: .8rem; color: #ff9aa2; margin-top: .35rem; }
[aria-invalid="true"] { border-color: rgba(230, 57, 70, .6) !important; }

/* Champ piège : invisible pour l'humain, rempli par les robots. */
.hp {
  position: absolute !important;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Choix du jeu. Les libellés restent en casse normale : les capitales
   forcées se lisent moins vite et alourdissent visuellement le formulaire. */
.game-picker { display: flex; flex-wrap: wrap; gap: .4rem; }
.game-picker label, .form-group > label { text-transform: none; letter-spacing: normal; }

.game-picker input { position: absolute; opacity: 0; width: 0; height: 0; }

.game-picker label {
  cursor: pointer;
  font-size: .85rem;
  padding: .45rem .85rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-secondary);
  transition: all .2s;
}

.game-picker label:hover { border-color: var(--border-hover); color: var(--text-primary); }

.game-picker input:checked + label {
  border-color: var(--red-primary);
  background: var(--red-subtle);
  color: var(--text-primary);
}

.game-picker input:focus-visible + label { outline: 2px solid var(--red-light); outline-offset: 2px; }

/* ═══ Apparition au défilement ════════════════════════════════ */

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}

.reveal.visible { opacity: 1; transform: none; }
.reveal-delay-1 { transition-delay: .08s; }
.reveal-delay-2 { transition-delay: .16s; }
.reveal-delay-3 { transition-delay: .24s; }

/* ═══ Bandeau défilant des plateformes ════════════════════════ */

.marquee {
  overflow: hidden;
  border-block: 1px solid var(--border);
  padding: 1.1rem 0;
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.marquee-track {
  display: flex;
  gap: 3.5rem;
  width: max-content;
  animation: slide 32s linear infinite;
}

.marquee:hover .marquee-track { animation-play-state: paused; }

.marquee span {
  font-family: var(--font-mono);
  font-size: .95rem;
  color: var(--text-muted);
  white-space: nowrap;
  transition: color .2s;
}

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

@keyframes slide {
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
}

/* ═══ Mobile ══════════════════════════════════════════════════ */

@media (max-width: 640px) {
  .works { padding: 6.5rem 1.1rem 3.5rem; }
  .works-grid { grid-template-columns: 1fr; }
  .channel { grid-template-columns: 38px 1fr; }
  .channel-meta { grid-column: 2; text-align: left; margin-top: .2rem; }
  .console-body { min-height: 170px; font-size: .74rem; }
}

/* ═══ Responsive hardening ════════════════════════════════════ */

html,
body {
  width: 100%;
  max-width: 100%;
}

body {
  min-width: 320px;
}

main,
section,
.section-container,
.hero-split,
.about-grid,
.services-grid,
.contact-grid,
.works,
.footer-container {
  min-width: 0;
}

.footer-container {
  gap: 1.5rem;
}

.footer-links {
  min-width: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.about-card,
.contact-form-card,
.service-detail,
.channel,
.work {
  min-width: 0;
}

.about-card .code-block {
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
}

@media (max-width: 1024px) {
  .about-grid {
    gap: clamp(2rem, 5vw, 3rem);
  }

  .contact-grid {
    gap: clamp(2rem, 5vw, 3rem);
  }
}

@media (max-width: 768px) {
  nav {
    height: 64px;
  }

  .nav-links {
    width: min(82vw, 280px);
    height: 100dvh;
    padding-top: 76px;
  }

  .hero-split {
    padding-top: 5.75rem;
  }

  .hero-split h1 {
    max-width: 20ch;
  }

  .about-card {
    padding: 1.5rem;
  }

  .service-detail {
    padding: 1.5rem;
    border-radius: var(--radius-lg);
  }

  .service-detail-number {
    font-size: 2.75rem;
  }

  .cta-box {
    padding: 2.25rem 1.5rem;
  }

  .contact-form-card {
    padding: 1.5rem;
    border-radius: var(--radius-lg);
  }

  .footer-links {
    justify-content: center;
  }
}

@media (max-width: 480px) {
  :root {
    --gouttiere: 1rem;
  }

  .hero-split {
    padding-top: 5.25rem;
  }

  .hero-split h1 {
    font-size: clamp(2rem, 10vw, 2.65rem);
  }

  .hero-split .hero-description {
    font-size: 1rem;
  }

  .hero-actions {
    width: 100%;
    align-items: stretch;
  }

  .hero-actions .btn {
    width: 100%;
    justify-content: center;
  }

  .hero-split .hero-stats {
    width: 100%;
    gap: 1.25rem;
  }

  .service-detail {
    padding: 1.25rem;
  }

  .service-detail-feature {
    max-width: 100%;
    white-space: normal;
  }

  .cta-section {
    padding-inline: 1rem;
  }

  .cta-box {
    padding: 2rem 1.1rem;
  }

  .contact-section {
    padding-inline: 1rem;
  }

  .contact-form-card {
    padding: 1.25rem;
  }

  .channel {
    padding: .85rem;
    gap: .75rem;
  }

  .channel-sub {
    white-space: normal;
  }

  .footer-container {
    padding-inline: 1rem;
  }
}


@media (min-width: 1500px) {
  :root {
    --container: min(88vw, 1920px);
    --container-wide: min(90vw, 2080px);
    --gouttiere: clamp(2rem, 3vw, 4.5rem);
  }

  nav {
    height: clamp(76px, 4.2vw, 88px);
  }

  .nav-logo {
    font-size: clamp(1.25rem, .95vw, 1.45rem);
  }

  .nav-logo img {
    width: clamp(36px, 2vw, 44px);
    height: clamp(36px, 2vw, 44px);
  }

  .nav-links {
    gap: clamp(8px, .65vw, 14px);
  }

  .nav-links a {
    font-size: clamp(.9rem, .68vw, 1.02rem);
    padding: 10px clamp(16px, 1vw, 22px);
  }

  .hero-split {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
    column-gap: clamp(4rem, 6vw, 8rem);
    min-height: clamp(44rem, 82svh, 62rem);
    padding-top: clamp(7.5rem, 10vh, 10rem);
    padding-bottom: clamp(4rem, 7vh, 6rem);
  }

  .hero-split h1 {
    font-size: clamp(3.6rem, 3vw, 5.25rem);
    max-width: 18ch;
    margin-bottom: 1.5rem;
  }

  .hero-badge {
    font-size: clamp(.8rem, .62vw, .95rem);
    padding: .5rem 1.15rem;
  }

  .hero-split .hero-description {
    max-width: 58ch;
    font-size: clamp(1.12rem, .92vw, 1.35rem);
    line-height: 1.75;
  }

  .hero-actions {
    gap: 1.1rem;
  }

  .btn {
    padding: .9rem 1.35rem;
    font-size: clamp(.95rem, .68vw, 1.05rem);
  }

  .hero-split .hero-stats {
    gap: clamp(2.8rem, 3.5vw, 4.5rem);
    margin-top: 3.2rem;
    padding-top: 2.3rem;
  }

  .hero-split .hero-stat .number {
    font-size: clamp(1.8rem, 1.35vw, 2.25rem);
  }

  .hero-split .hero-stat .label {
    font-size: clamp(.78rem, .58vw, .92rem);
  }

  .console {
    font-size: clamp(.82rem, .62vw, .98rem);
    border-radius: 18px;
  }

  .console-bar {
    padding: .85rem 1.15rem;
  }

  .console-name {
    font-size: clamp(.74rem, .56vw, .9rem);
  }

  .console-body {
    min-height: clamp(14rem, 13vw, 19rem);
    padding: 1.35rem 1.5rem;
    gap: .42rem;
  }

  .section-title {
    font-size: clamp(2.6rem, 2.4vw, 4rem);
  }

  .section-subtitle {
    max-width: 760px;
    font-size: clamp(1.1rem, .82vw, 1.28rem);
  }

  .section-label {
    font-size: clamp(.75rem, .55vw, .9rem);
  }

  .about-grid {
    gap: clamp(4.5rem, 6vw, 8rem);
  }

  .about-content p {
    font-size: clamp(1rem, .76vw, 1.18rem);
  }

  .about-feature {
    padding: .9rem 1.1rem;
    font-size: clamp(.9rem, .68vw, 1.05rem);
  }

  .about-card {
    padding: clamp(2.5rem, 2.6vw, 3.5rem);
  }

  .about-card .code-block {
    font-size: clamp(.85rem, .64vw, 1rem);
  }

  .services-grid {
    gap: clamp(1.5rem, 1.8vw, 2.25rem);
  }

  .service-card {
    padding: clamp(2rem, 2vw, 2.75rem);
  }

  .service-card h3 {
    font-size: clamp(1.25rem, .95vw, 1.5rem);
  }

  .service-card p {
    font-size: clamp(.95rem, .72vw, 1.1rem);
  }

  .service-tag {
    font-size: clamp(.75rem, .54vw, .88rem);
    padding: .32rem .85rem;
  }

  .services-hero h1,
  .tools-hero h1,
  .contact-info h1,
  .works-head h1 {
    font-size: clamp(3rem, 2.7vw, 4.6rem);
  }

  .services-hero-tagline,
  .services-hero p,
  .tools-hero p,
  .works-head p,
  .contact-info > p {
    font-size: clamp(1.08rem, .82vw, 1.28rem);
  }

  .contact-grid {
    max-width: min(84vw, 1600px);
    gap: clamp(4rem, 5vw, 7rem);
  }

  .contact-form-card {
    padding: clamp(2.5rem, 2.5vw, 3.5rem);
  }

  .contact-form-card h2 {
    font-size: clamp(1.3rem, 1vw, 1.6rem);
  }

  .form-group label,
  .contact-method-label {
    font-size: clamp(.8rem, .55vw, .9rem);
  }

  .form-group input,
  .form-group textarea,
  .form-group select,
  .contact-method-value {
    font-size: clamp(.95rem, .66vw, 1.08rem);
  }

  .cta-box {
    max-width: min(52vw, 980px);
    padding: clamp(4rem, 4vw, 5.5rem) clamp(3rem, 4vw, 5rem);
  }

  .cta-box h2 {
    font-size: clamp(2rem, 1.7vw, 2.8rem);
  }

  .cta-box p {
    font-size: clamp(1.05rem, .78vw, 1.22rem);
  }

  .works-head {
    max-width: 72ch;
  }

  .works-grid {
    grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr));
    gap: clamp(1.3rem, 1.5vw, 2rem);
  }

  .work h2 {
    font-size: clamp(1.12rem, .85vw, 1.35rem);
  }

  .work p {
    font-size: clamp(.9rem, .68vw, 1.05rem);
  }

  .linktree-container {
    max-width: min(28vw, 560px);
  }

  .linktree-avatar {
    width: clamp(96px, 6vw, 124px);
    height: clamp(96px, 6vw, 124px);
  }

  .linktree-name {
    font-size: clamp(1.5rem, 1.15vw, 1.9rem);
  }

  .linktree-bio,
  .linktree-link-title {
    font-size: clamp(.9rem, .67vw, 1.05rem);
  }

  .linktree-link-desc {
    font-size: clamp(.8rem, .58vw, .92rem);
  }

  .legal-container {
    max-width: min(70vw, 1100px);
  }

  .footer-brand {
    font-size: clamp(.9rem, .68vw, 1.05rem);
  }

  .footer-copy,
  .footer-links a {
    font-size: clamp(.8rem, .6vw, .95rem);
  }
}

@media (min-width: 2200px) {
  html {
    font-size: clamp(16px, .72vw, 20px);
  }
}