/* ==========================================================================
   STUDIO G — Feuille de style unique
   Sommaire :
   1. Polices
   2. Variables globales (couleurs, espacements, typo)
   3. Réinitialisation (reset)
   4. Styles de base
   5. Composants utilitaires (container, boutons, badges)
   6. En-tête / navigation
   7. Menu mobile
   8. Pied de page
   9. Section "Lancez votre projet" (réutilisée sur plusieurs pages)
   10. Page d'accueil
   11. Page Services
   12. Page Réalisations
   13. Page Contact
   14. Pages légales
   15. Animations
   16. Responsive
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. POLICES
   - Hammersmith One : disponible sur Google Fonts, utilisée pour tous les
     titres (elle correspond visuellement à la police des gros titres de la
     maquette Canva).
   - Glacial Indifference : PAS disponible sur Google Fonts (police premium
     distribuée par Canva). On déclare quand même la police via @font-face :
     si vous déposez les fichiers .woff2 dans le dossier /fonts, elle sera
     utilisée automatiquement. En attendant, "Jost" (Google Fonts) sert de
     remplaçante : ses proportions géométriques sont très proches.
   -------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Hammersmith+One&family=Jost:wght@400;500;600;700&display=swap');

@font-face {
  font-family: 'Glacial Indifference';
  src: url('fonts/GlacialIndifference-Regular.woff2') format('woff2'),
       url('fonts/GlacialIndifference-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Glacial Indifference';
  src: url('fonts/GlacialIndifference-Bold.woff2') format('woff2'),
       url('fonts/GlacialIndifference-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   2. VARIABLES GLOBALES
   Toutes les couleurs et mesures du site partent d'ici : changer une valeur
   ici la change partout, sans toucher au reste du fichier.
   -------------------------------------------------------------------------- */
:root {
  /* Couleurs de marque */
  --c-orange: #ff4712;
  --c-orange-deep: #e8390a;
  --c-orange-light: #ff8a42;
  --c-pink: #e0227d;
  --c-pink-light: #f6a8cb;

  /* Neutres */
  --c-black: #141414;
  --c-grey: #c9c9c9;
  --c-grey-light: #f2f2f2;
  --c-white: #ffffff;

  /* Dégradés de marque */
  --gradient-vif: linear-gradient(100deg, var(--c-pink) 0%, var(--c-orange-light) 55%, var(--c-pink) 100%);
  --gradient-services: linear-gradient(145deg, var(--c-pink) 0%, var(--c-orange-light) 100%);
  --gradient-pastel: linear-gradient(160deg, #f6d0e2 0%, #ffe3c2 100%);

  /* Typographie */
  --font-heading: 'Hammersmith One', 'Jost', sans-serif;
  --font-body: 'Glacial Indifference', 'Jost', sans-serif;

  /* Échelle de taille de texte (fluide selon la largeur d'écran) */
  --fs-hero: clamp(2.75rem, 6vw, 5.5rem);
  --fs-h1: clamp(2.25rem, 4vw, 3.25rem);
  --fs-h2: clamp(1.6rem, 3vw, 2.375rem);
  --fs-h3: 1.4rem;
  --fs-body: 1.05rem;
  --fs-small: 0.9rem;

  /* Échelle d'espacement */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;

  /* Arrondis */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;

  /* Largeur de contenu */
  --container-width: 1320px;

  /* Transition standard pour les interactions */
  --transition: 0.25s ease;
}

/* --------------------------------------------------------------------------
   3. RÉINITIALISATION (RESET)
   Neutralise les styles par défaut du navigateur pour repartir sur une
   base identique quel que soit le navigateur (Chrome, Firefox, Safari...).
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

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

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

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

ul {
  list-style: none;
}

/* Respect de la préférence "réduire les animations" du visiteur */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------------------------
   4. STYLES DE BASE
   -------------------------------------------------------------------------- */
body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--c-black);
  background-color: var(--c-white);
  line-height: 1.6;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 400; /* Hammersmith One n'a qu'une seule graisse */
  line-height: 1.15;
}

p {
  max-width: 70ch;
}

/* Focus clavier bien visible, pour l'accessibilité */
a:focus-visible,
button:focus-visible,
iframe:focus-visible {
  outline: 3px solid var(--c-orange);
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   5. COMPOSANTS UTILITAIRES
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container-width);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 3.75rem);
}

/* Bouton générique : sert pour tous les CTA "Démarrer mon projet" */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-weight: 700;
  text-align: center;
  border-radius: var(--radius-sm);
  transition: transform var(--transition), background-color var(--transition), box-shadow var(--transition);
  white-space: normal;
}

.btn-primary {
  background-color: var(--c-orange);
  color: var(--c-white);
  padding: 0.5rem 1.15rem;
  font-size: 0.85rem;
  line-height: 1.25;
  border-radius: 8px;
}

.btn-primary:hover,
.btn-primary:focus-visible {
  background-color: var(--c-orange-deep);
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(255, 71, 18, 0.35);
}

/* Grand bouton utilisé dans les sections "Lancez votre projet" */
.btn-large {
  padding: 1.1rem 2.75rem;
  font-size: 1.3rem;
  border-radius: var(--radius-md);
}

/* Petit bouton avec flèche, utilisé sur les cartes de tarifs */
.btn-arrow {
  background-color: var(--c-orange);
  color: var(--c-white);
  padding: 0.65rem 1.5rem;
  font-size: 0.95rem;
  border-radius: var(--radius-sm);
  font-weight: 700;
}

/* Texte de mentions/disclaimer souligné, petite taille */
.disclaimer-text {
  font-size: var(--fs-small);
  text-decoration: underline;
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   6. EN-TÊTE / NAVIGATION
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 200;
  background-color: var(--c-white);
  border-bottom: 1px solid var(--c-black);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 1rem;
}

.logo-link {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.logo-link img {
  height: 44px;
  width: auto;
  transition: transform var(--transition);
}

.logo-link:hover img {
  transform: scale(1.06) rotate(-3deg);
}

.main-nav {
  display: flex;
  align-items: center;
  gap: clamp(1.5rem, 3vw, 3rem);
}

.main-nav a {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.05rem;
  position: relative;
}

/* Petit soulignement animé au survol des liens de menu */
.main-nav a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 0;
  height: 2px;
  background-color: var(--c-orange);
  transition: width var(--transition);
}

.main-nav a:hover::after,
.main-nav a[aria-current='page']::after {
  width: 100%;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* Bouton hamburger, caché sur desktop, visible en mobile (voir media queries) */
.menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 32px;
  height: 26px;
}

.menu-toggle span {
  display: block;
  height: 3px;
  width: 100%;
  background-color: var(--c-black);
  border-radius: 2px;
  transition: transform var(--transition), opacity var(--transition);
}

/* --------------------------------------------------------------------------
   7. MENU MOBILE
   Sur petit écran, .main-nav se transforme en panneau déroulant piloté par
   la classe .is-open (ajoutée par script.js au clic sur le hamburger).
   -------------------------------------------------------------------------- */
@media (max-width: 860px) {
  .menu-toggle {
    display: flex;
  }

  .main-nav {
    position: fixed;
    inset: 72px 0 0 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    background-color: var(--c-white);
    padding: 1.5rem clamp(1.25rem, 5vw, 3.75rem);
    transform: translateY(-110%);
    opacity: 0;
    transition: transform var(--transition), opacity var(--transition);
    border-bottom: 1px solid var(--c-black);
  }

  .main-nav.is-open {
    transform: translateY(0);
    opacity: 1;
  }

  .main-nav a {
    width: 100%;
    padding: 0.9rem 0;
    border-bottom: 1px solid var(--c-grey-light);
  }

  .header-actions .btn-primary {
    display: none;
  }

  .menu-toggle[aria-expanded='true'] span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }
  .menu-toggle[aria-expanded='true'] span:nth-child(2) {
    opacity: 0;
  }
  .menu-toggle[aria-expanded='true'] span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }
}

/* --------------------------------------------------------------------------
   8. PIED DE PAGE
   -------------------------------------------------------------------------- */
.site-footer {
  border-top: 1px solid var(--c-black);
  margin-top: var(--space-2xl);
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(180px, 0.8fr) 2fr 1fr;
  gap: var(--space-lg);
  padding-block: var(--space-lg) var(--space-md);
}

.footer-col-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.85rem;
  border-right: 1px solid var(--c-black);
  padding-right: var(--space-lg);
}

.footer-col-brand img {
  height: 60px;
  width: auto;
  margin-bottom: 0.5rem;
}

.footer-col-brand a:not(.btn) {
  font-family: var(--font-body);
  font-weight: 700;
}

.footer-col-brand .btn-primary {
  margin-top: 0.5rem;
}

.footer-col-info {
  padding-right: var(--space-lg);
}

.footer-col-info p {
  max-width: 55ch;
}

.footer-contact {
  margin-top: var(--space-md);
}

.footer-contact strong {
  display: block;
  margin-bottom: 0.6rem;
}

.footer-contact-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.5rem;
}

.footer-contact-row .icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

.footer-col-legal {
  display: flex;
  flex-direction: column;
}

.footer-col-legal a {
  font-weight: 600;
  padding-block: 0.2rem;
}

.footer-col-legal hr {
  border: none;
  border-top: 1px solid var(--c-black);
  margin-block: 1rem;
}

.footer-copyright {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--fs-small);
}

.footer-copyright img {
  height: 20px;
  width: auto;
}

/* --------------------------------------------------------------------------
   9. SECTION "LANCEZ VOTRE PROJET" (réutilisée sur home / services / réalisations)
   -------------------------------------------------------------------------- */
.cta-section {
  text-align: center;
  padding-block: var(--space-2xl);
}

.cta-section h2 {
  font-size: var(--fs-h1);
  margin-bottom: 0.75rem;
}

.cta-section p {
  margin-inline: auto;
  margin-bottom: var(--space-lg);
  font-size: 1.1rem;
}

/* --------------------------------------------------------------------------
   10. PAGE D'ACCUEIL
   -------------------------------------------------------------------------- */

/* -- Bandeau "hero" gris avec le grand titre STUDIO G -- */
.hero {
  position: relative;
  background-color: var(--c-grey);
  padding-block: var(--space-2xl);
  text-align: center;
  overflow: hidden;
}

.hero h1 {
  font-size: var(--fs-hero);
  letter-spacing: 0.05em;
}

.hero p {
  margin-inline: auto;
  font-size: 1.2rem;
  margin-top: 0.5rem;
}

/* Décor : deux traits diagonaux blancs qui traversent toute la hauteur
   du bandeau gris, comme sur la maquette. Astuce : chaque trait est bien
   plus haut que son conteneur (160%) et légèrement décalé vers le haut
   (-30%), pour qu'une fois pivoté à 24°, il dépasse largement en haut et
   en bas ; c'est le "overflow: hidden" du .hero qui coupe proprement aux
   bords du bandeau, donnant l'effet de 2 rayures qui traversent la zone. */
.hero-lines {
  position: absolute;
  top: 0;
  right: 4%;
  width: 130px;
  height: 100%;
  pointer-events: none;
}

.hero-lines span {
  position: absolute;
  top: -30%;
  right: 0;
  width: 6px;
  height: 160%;
  background-color: var(--c-white);
  transform: rotate(24deg);
}

.hero-lines span:last-child {
  right: 26px;
}

/* -- Section présentation texte + visuel -- */
.presentation {
  padding-block: var(--space-2xl);
}

.presentation .container {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--space-xl);
  align-items: center;
}

.presentation-text p {
  margin-bottom: var(--space-md);
  font-weight: 600;
  font-size: 1.05rem;
}

/* Visuel : photo carrée avec bordure orange arrondie, comme sur la maquette */
.presentation-visual {
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-lg);
  border: 4px solid var(--c-orange);
  overflow: hidden;
}

.presentation-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* -- Bloc "Optimiser votre business" -- */
.business-block {
  background: var(--gradient-vif);
  border-radius: var(--radius-lg);
  padding: var(--space-xl) var(--space-lg);
  text-align: center;
  margin-block: var(--space-2xl);
  color: var(--c-black);
}

.business-block h2 {
  font-size: var(--fs-h1);
  margin-bottom: 0.75rem;
}

.business-block > p {
  font-weight: 600;
  margin-inline: auto;
  max-width: 60ch;
}

.business-features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
  margin-top: var(--space-xl);
}

.business-feature h3 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.05rem;
  text-transform: uppercase;
  margin-bottom: var(--space-md);
}

.business-feature .icon {
  width: 56px;
  height: 56px;
  margin-inline: auto;
}

/* Légende affichée sous l'icône (ex : "24h/24h" sous l'œil) */
.business-feature .icon-caption {
  display: block;
  font-weight: 700;
  margin-top: 0.5rem;
  font-size: 0.95rem;
}

/* -- Titre de section "NOTRE PROCESSUS" -- */
.section-title {
  color: var(--c-orange);
  font-size: var(--fs-h2);
  margin-bottom: var(--space-md);
}

/* -- Bandeau gris "notre processus" -- */
.process {
  background-color: var(--c-grey);
  padding-block: var(--space-2xl);
}

.process-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
  text-align: center;
}

.process-step .step-number {
  font-family: var(--font-heading);
  font-size: 3.5rem;
  margin-bottom: var(--space-sm);
}

.process-step h3 {
  font-family: var(--font-body);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 1.1rem;
  margin-bottom: var(--space-sm);
}

/* --------------------------------------------------------------------------
   11. PAGE SERVICES
   -------------------------------------------------------------------------- */
.page-intro {
  padding-block: var(--space-xl) var(--space-lg);
}

.page-intro h1 {
  font-size: var(--fs-h1);
  margin-bottom: var(--space-md);
}

.page-intro p {
  font-size: 1.1rem;
  max-width: 80ch;
}

.pricing-section {
  position: relative;
  background: var(--gradient-services);
  padding-block: var(--space-2xl);
  overflow: hidden;
}

/* Grand logo décoratif semi-transparent en fond, comme sur la maquette */
.pricing-section::before {
  content: '';
  position: absolute;
  top: -60px;
  right: 2%;
  width: 420px;
  height: 480px;
  background-image: url('assets/logo.png');
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0.16;
  filter: brightness(0) invert(1);
  pointer-events: none;
}

.pricing-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: repeat(3, auto);
  gap: var(--space-lg) var(--space-xl);
}

.pricing-card {
  background: var(--gradient-pastel);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
}

.card-essential { grid-column: 1; grid-row: 1; }
.card-pro { grid-column: 1; grid-row: 2; }
.card-premium { grid-column: 1; grid-row: 3; position: relative; }
.card-serenite {
  grid-column: 2;
  grid-row: 2 / span 2;
  display: flex;
  flex-direction: column;
}

.pricing-card h2 {
  font-size: 1.5rem;
  margin-bottom: var(--space-sm);
}

.pricing-card > p {
  margin-bottom: var(--space-sm);
}

.pricing-card .includes {
  margin-bottom: var(--space-md);
  font-size: 0.98rem;
}

.card-serenite .disclaimer-text {
  margin-top: var(--space-md);
  display: block;
}

.card-serenite p:not(.disclaimer-text) {
  margin-bottom: var(--space-sm);
}

.card-serenite strong {
  display: block;
  margin-bottom: var(--space-md);
}

/* Badge étoile "N°1" — technique : deux étoiles superposées (noire puis
   blanche, légèrement plus petite) pour simuler un contour, car CSS
   clip-path ne permet pas de bordure directement. */
.badge-star {
  position: absolute;
  top: -28px;
  left: -20px;
  width: 76px;
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.badge-star::before,
.badge-star::after {
  content: '';
  position: absolute;
  inset: 0;
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%,
    21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

.badge-star::before {
  background-color: var(--c-black);
}

.badge-star::after {
  inset: 4px;
  background-color: var(--c-white);
}

.badge-star span {
  position: relative;
  z-index: 1;
  font-weight: 700;
  font-size: 0.85rem;
  transform: translateY(2px);
}

.pricing-disclaimer {
  position: relative;
  z-index: 1;
  margin-top: var(--space-lg);
  max-width: 90ch;
}

/* --------------------------------------------------------------------------
   12. PAGE RÉALISATIONS
   -------------------------------------------------------------------------- */
.projects-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-lg);
  padding-block: var(--space-lg) var(--space-2xl);
}

.project-card {
  display: block;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 4px solid var(--c-pink-light);
  transition: transform var(--transition), box-shadow var(--transition);
  background-color: var(--c-white);
}

.project-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.18);
}

/* Zone d'aperçu : on y insère un <iframe> du vrai site, réduit à l'échelle
   pour ressembler à une miniature (voir commentaire détaillé dans le HTML). */
.project-preview {
  position: relative;
  height: 320px;
  overflow: hidden;
  background-color: var(--c-grey-light);
}

.project-preview iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 250%;
  height: 250%;
  border: 0;
  transform: scale(0.4);
  transform-origin: 0 0;
  pointer-events: none; /* le clic doit atteindre le lien <a> parent */
}

.project-preview.is-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #cfe8fb 0%, #cfe8fb 55%, #a9d18e 55%, #8fc16f 100%);
}

.project-label {
  padding: var(--space-md);
  text-align: center;
  font-weight: 700;
  font-size: 1.15rem;
  text-transform: uppercase;
  background: var(--gradient-pastel);
}

.project-card-cta {
  display: flex;
  flex-direction: column;
}

.project-card-cta .project-message {
  flex: 1;
  display: flex;
  align-items: center;
  padding: var(--space-lg);
  background: var(--gradient-pastel);
  font-size: 1.4rem;
}

/* --------------------------------------------------------------------------
   13. PAGE CONTACT
   -------------------------------------------------------------------------- */
.contact-intro {
  padding-block: var(--space-xl) var(--space-lg);
}

.contact-intro h1 {
  font-size: var(--fs-h1);
  margin-bottom: var(--space-sm);
}

.contact-intro a {
  font-weight: 700;
  text-decoration: underline;
}

.contact-form-section {
  padding-bottom: var(--space-2xl);
}

.contact-form-wrapper {
  background: var(--gradient-vif);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
}

.contact-form-wrapper h2 {
  color: var(--c-white);
  font-size: 1.6rem;
  margin-bottom: var(--space-md);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.tally-embed-frame {
  background: var(--gradient-pastel);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  min-height: 480px;
}

.tally-embed-frame iframe {
  width: 100%;
  border: 0;
}

/* --------------------------------------------------------------------------
   14. PAGES LÉGALES (mentions légales / confidentialité)
   -------------------------------------------------------------------------- */
.legal-page {
  padding-block: var(--space-xl) var(--space-2xl);
}

.legal-page h1 {
  font-size: var(--fs-h1);
  margin-bottom: var(--space-lg);
}

.legal-page section {
  margin-bottom: var(--space-md);
}

.legal-page h2 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.1rem;
  margin-bottom: 0.3rem;
}

.legal-page a {
  text-decoration: underline;
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   15. ANIMATIONS
   Les éléments portant la classe .reveal démarrent légèrement décalés vers
   le bas et transparents ; script.js ajoute .is-visible quand ils entrent
   dans l'écran (IntersectionObserver), ce qui déclenche la transition.
   -------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* --------------------------------------------------------------------------
   16. RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 960px) {
  .presentation .container {
    grid-template-columns: 1fr;
  }

  .presentation-visual {
    max-width: 420px;
    margin-inline: auto;
  }

  .business-features {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

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

  .pricing-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }

  .card-essential, .card-pro, .card-premium, .card-serenite {
    grid-column: 1;
    grid-row: auto;
  }

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

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

  .footer-col-brand,
  .footer-col-info {
    border-right: none;
    padding-right: 0;
    border-bottom: 1px solid var(--c-black);
    padding-bottom: var(--space-md);
  }
}

@media (max-width: 600px) {
  .hero-lines {
    display: none;
  }

  .badge-star {
    width: 60px;
    height: 60px;
    top: -20px;
    left: -14px;
  }
}