/* ============================================
   NAYT PROD - Design System
   Marketing Digital & Production Visuelle
   ============================================ */

/* ===== RESET ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{min-height:100vh;line-height:1.6;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}
img,picture,video,canvas,svg{display:block;max-width:100%;height:auto}
input,button,textarea,select{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:none}
a{text-decoration:none;color:inherit}
ul,ol{list-style:none}
h1,h2,h3,h4,h5,h6{line-height:1.1;font-weight:600}

/* ===== VARIABLES ===== */
:root{
  /* Couleurs principales (extraites du logo NAYT) */
  --teal:#00A99D;
  --teal-light:#1FCBBE;
  --teal-dark:#008075;
  --blue:#1E90FF;
  --blue-light:#4FA8FF;
  --blue-dark:#0066CC;

  /* Neutres */
  --black:#0A0A0A;
  --black-soft:#141414;
  --black-2:#1C1C1C;
  --black-3:#262626;
  --gray-100:#F5F5F5;
  --gray-200:#E5E5E5;
  --gray-300:#D4D4D4;
  --gray-400:#A3A3A3;
  --gray-500:#737373;
  --gray-600:#525252;
  --gray-700:#404040;
  --gray-800:#262626;
  --gray-900:#171717;
  --white:#FFFFFF;

  /* Sémantiques */
  --bg:#0A0A0A;
  --bg-soft:#141414;
  --bg-card:#1C1C1C;
  --text:#FFFFFF;
  --text-muted:#A3A3A3;
  --text-dim:#737373;
  --border:rgba(255,255,255,.08);
  --border-strong:rgba(255,255,255,.15);

  /* Accents */
  --accent:var(--teal);
  --accent-2:var(--blue);
  --gradient-brand:linear-gradient(135deg,var(--teal) 0%,var(--blue) 100%);
  --gradient-brand-soft:linear-gradient(135deg,rgba(0,169,157,.15) 0%,rgba(30,144,255,.15) 100%);
  --gradient-text:linear-gradient(135deg,#FFFFFF 0%,#A3A3A3 100%);
  --gradient-glow:radial-gradient(circle,rgba(0,169,157,.4) 0%,transparent 70%);

  /* Typographie */
  --font-display:'Playfair Display',Georgia,serif;
  --font-body:'Inter',system-ui,-apple-system,sans-serif;
  --font-mono:'JetBrains Mono','Courier New',monospace;

  /* Tailles */
  --fs-xs:.75rem;
  --fs-sm:.875rem;
  --fs-base:1rem;
  --fs-lg:1.125rem;
  --fs-xl:1.25rem;
  --fs-2xl:1.5rem;
  --fs-3xl:2rem;
  --fs-4xl:2.5rem;
  --fs-5xl:3.5rem;
  --fs-6xl:5rem;
  --fs-7xl:6.5rem;
  --fs-8xl:8rem;

  /* Espacements */
  --sp-1:.25rem;
  --sp-2:.5rem;
  --sp-3:.75rem;
  --sp-4:1rem;
  --sp-5:1.25rem;
  --sp-6:1.5rem;
  --sp-8:2rem;
  --sp-10:2.5rem;
  --sp-12:3rem;
  --sp-16:4rem;
  --sp-20:5rem;
  --sp-24:6rem;
  --sp-32:8rem;

  /* Layout */
  --container:1320px;
  --container-narrow:980px;
  --header-h:80px;

  /* Border radius */
  --r-sm:6px;
  --r-md:12px;
  --r-lg:20px;
  --r-xl:32px;
  --r-full:9999px;

  /* Ombres */
  --shadow-sm:0 2px 8px rgba(0,0,0,.3);
  --shadow-md:0 8px 24px rgba(0,0,0,.4);
  --shadow-lg:0 20px 60px rgba(0,0,0,.5);
  --shadow-glow:0 0 60px rgba(0,169,157,.3);
  --shadow-glow-blue:0 0 60px rgba(30,144,255,.3);

  /* Transitions */
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-bounce:cubic-bezier(.68,-.55,.27,1.55);
  --t-fast:.2s var(--ease);
  --t-base:.4s var(--ease);
  --t-slow:.7s var(--ease);

  /* Z-index */
  --z-base:1;
  --z-sticky:50;
  --z-header:100;
  --z-overlay:200;
  --z-modal:300;
  --z-cursor:9999;
  --z-loader:10000;
}

/* ===== BODY & TYPOGRAPHIE ===== */
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:var(--fs-base);
}

::selection{background:var(--teal);color:var(--black)}

h1,h2,h3,h4,h5{font-family:var(--font-display);letter-spacing:-.02em}
h1{font-size:clamp(2.5rem,8vw,var(--fs-8xl));font-weight:700;line-height:.95}
h2{font-size:clamp(2rem,5vw,var(--fs-6xl));font-weight:700;line-height:1}
h3{font-size:clamp(1.5rem,3vw,var(--fs-4xl));font-weight:600}
h4{font-size:var(--fs-2xl);font-weight:600}
h5{font-size:var(--fs-xl);font-weight:600}

p{color:var(--text-muted);line-height:1.7}

/* Scrollbar */
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:var(--black)}
::-webkit-scrollbar-thumb{background:var(--gray-700);border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:var(--teal)}

/* ===== LAYOUT ===== */
.container{max-width:var(--container);margin:0 auto;padding:0 var(--sp-6)}
.container-narrow{max-width:var(--container-narrow);margin:0 auto;padding:0 var(--sp-6)}

.section{padding:var(--sp-32) 0;position:relative}
.section-sm{padding:var(--sp-20) 0;position:relative}
@media (max-width:768px){
  .section{padding:var(--sp-20) 0}
  .section-sm{padding:var(--sp-16) 0}
}

/* ===== UTILS ===== */
.text-gradient{
  background:var(--gradient-brand);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}
.text-gradient-light{
  background:var(--gradient-text);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:var(--sp-3);
  font-family:var(--font-mono);
  font-size:var(--fs-xs);
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--teal);
  margin-bottom:var(--sp-6);
  font-weight:500;
}
.eyebrow::before{
  content:'';
  width:32px;
  height:1px;
  background:var(--teal);
}

.section-title{
  font-size:clamp(2.5rem,5vw,4.5rem);
  font-family:var(--font-display);
  letter-spacing:-.02em;
  margin-bottom:var(--sp-6);
}
.section-subtitle{
  font-size:var(--fs-lg);
  color:var(--text-muted);
  max-width:680px;
  line-height:1.7;
}

.section-header{margin-bottom:var(--sp-16);max-width:780px}
.section-header.center{margin-left:auto;margin-right:auto;text-align:center}

/* ===== BUTTONS ===== */
.btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--sp-3);
  padding:1rem 2rem;
  font-size:var(--fs-sm);
  font-weight:500;
  letter-spacing:.05em;
  text-transform:uppercase;
  border-radius:var(--r-full);
  transition:all var(--t-base);
  overflow:hidden;
  cursor:pointer;
  white-space:nowrap;
  user-select:none;
  border:1px solid transparent;
}
.btn svg{width:18px;height:18px;transition:transform var(--t-base)}
.btn:hover svg{transform:translateX(4px)}

.btn-primary{
  background:var(--gradient-brand);
  color:var(--white);
  box-shadow:0 10px 30px rgba(0,169,157,.3);
}
.btn-primary:hover{
  box-shadow:0 15px 40px rgba(0,169,157,.5);
  transform:translateY(-2px);
}

.btn-outline{
  background:transparent;
  color:var(--white);
  border-color:var(--border-strong);
}
.btn-outline:hover{
  background:var(--white);
  color:var(--black);
  border-color:var(--white);
}

.btn-ghost{
  background:rgba(255,255,255,.05);
  color:var(--white);
  backdrop-filter:blur(10px);
  border-color:var(--border);
}
.btn-ghost:hover{
  background:rgba(255,255,255,.1);
  border-color:var(--border-strong);
}

.btn-large{padding:1.25rem 2.5rem;font-size:var(--fs-base)}
.btn-block{width:100%}

/* Magnetic effect base */
.btn-magnetic{transition:transform .3s var(--ease-out)}

/* ===== HEADER ===== */
.site-header{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:var(--z-header);
  height:var(--header-h);
  display:flex;
  align-items:center;
  background:rgba(10,10,10,.7);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);
  transition:all var(--t-base);
}
.site-header.scrolled{
  background:rgba(10,10,10,.95);
  height:64px;
}
.site-header .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
}

.logo{
  display:flex;
  align-items:center;
  gap:.75rem;
  z-index:2;
  transition:transform var(--t-base);
}
.logo:hover{transform:translateY(-1px)}
.logo-mark{
  height:44px;
  width:auto;
  transition:transform var(--t-base);
  filter:drop-shadow(0 4px 12px rgba(30,144,255,.35));
}
.logo:hover .logo-mark{transform:rotate(-8deg) scale(1.05)}
.logo-text{
  display:flex;
  flex-direction:column;
  line-height:1;
  gap:2px;
}
.logo-name{
  font-family:var(--font-display);
  font-size:1.4rem;
  font-weight:700;
  letter-spacing:.02em;
  color:var(--white);
  line-height:1;
}
.logo-sub{
  font-family:var(--font-mono);
  font-size:.65rem;
  font-weight:500;
  letter-spacing:.45em;
  color:var(--teal);
  text-transform:uppercase;
  line-height:1;
}
.site-header.scrolled .logo-mark{height:36px}
.site-header.scrolled .logo-name{font-size:1.2rem}
@media (max-width:520px){
  .logo-mark{height:36px}
  .logo-name{font-size:1.1rem}
  .logo-sub{font-size:.55rem;letter-spacing:.35em}
}
/* Footer logo variant */
.site-footer .logo-mark{filter:drop-shadow(0 4px 16px rgba(30,144,255,.4))}

/* Navigation */
.main-nav{display:flex;align-items:center;gap:var(--sp-2)}
.nav-link{
  position:relative;
  padding:.6rem 1rem;
  font-size:var(--fs-sm);
  font-weight:500;
  color:var(--text-muted);
  letter-spacing:.02em;
  transition:color var(--t-fast);
}
.nav-link::after{
  content:'';
  position:absolute;
  bottom:0;
  left:50%;
  width:0;
  height:1px;
  background:var(--gradient-brand);
  transition:all var(--t-base);
  transform:translateX(-50%);
}
.nav-link:hover,.nav-link.active{color:var(--white)}
.nav-link:hover::after,.nav-link.active::after{width:60%}

/* Dropdown Mega Menu */
.has-dropdown{position:relative}
.dropdown-toggle{display:flex;align-items:center;gap:var(--sp-2)}
.dropdown-toggle::after{
  content:'';
  width:6px;
  height:6px;
  border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;
  transform:rotate(45deg);
  transition:transform var(--t-fast);
}
.has-dropdown:hover .dropdown-toggle::after{transform:rotate(225deg)}

.mega-menu{
  position:absolute;
  top:100%;
  left:50%;
  transform:translateX(-50%) translateY(10px);
  min-width:760px;
  padding:var(--sp-6);
  background:rgba(20,20,20,.98);
  backdrop-filter:blur(20px);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg);
  opacity:0;
  visibility:hidden;
  transition:all var(--t-base);
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--sp-2);
}
.has-dropdown:hover .mega-menu{
  opacity:1;
  visibility:visible;
  transform:translateX(-50%) translateY(0);
}
.mega-menu-item{
  display:flex;
  gap:var(--sp-4);
  padding:var(--sp-4);
  border-radius:var(--r-md);
  transition:background var(--t-fast);
}
.mega-menu-item:hover{background:rgba(255,255,255,.05)}
.mega-menu-icon{
  width:42px;
  height:42px;
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--gradient-brand-soft);
  border-radius:var(--r-md);
  color:var(--teal);
}
.mega-menu-icon svg{width:20px;height:20px}
.mega-menu-content h5{
  font-family:var(--font-body);
  font-size:var(--fs-sm);
  font-weight:600;
  color:var(--white);
  margin-bottom:4px;
}
.mega-menu-content p{
  font-size:var(--fs-xs);
  color:var(--text-dim);
  margin:0;
}

/* Header right */
.header-right{display:flex;align-items:center;gap:var(--sp-4)}
.header-cta{
  padding:.7rem 1.5rem;
  font-size:var(--fs-sm);
}

/* Burger menu */
.burger{
  display:none;
  width:42px;
  height:42px;
  position:relative;
  z-index:2;
}
.burger span{
  position:absolute;
  left:25%;
  width:50%;
  height:2px;
  background:var(--white);
  border-radius:2px;
  transition:all var(--t-base);
}
.burger span:nth-child(1){top:35%}
.burger span:nth-child(2){top:50%}
.burger span:nth-child(3){top:65%}
.burger.active span:nth-child(1){top:50%;transform:rotate(45deg)}
.burger.active span:nth-child(2){opacity:0}
.burger.active span:nth-child(3){top:50%;transform:rotate(-45deg)}

/* Mobile menu */
.mobile-menu{
  position:fixed;
  inset:0;
  background:var(--black);
  z-index:var(--z-overlay);
  padding:calc(var(--header-h) + 2rem) var(--sp-6) var(--sp-8);
  opacity:0;
  visibility:hidden;
  transform:translateY(-20px);
  transition:all var(--t-base);
  overflow-y:auto;
}
.mobile-menu.active{opacity:1;visibility:visible;transform:translateY(0)}
.mobile-nav{display:flex;flex-direction:column;gap:var(--sp-4)}
.mobile-nav a{
  display:block;
  padding:var(--sp-4) 0;
  font-family:var(--font-display);
  font-size:var(--fs-3xl);
  color:var(--white);
  border-bottom:1px solid var(--border);
}
.mobile-nav a:hover{color:var(--teal)}

@media (max-width:1024px){
  .main-nav,.header-cta{display:none}
  .burger{display:block}
}

/* ===== FOOTER ===== */
.site-footer{
  background:var(--black-soft);
  border-top:1px solid var(--border);
  padding:var(--sp-24) 0 var(--sp-8);
  position:relative;
  overflow:hidden;
}
.site-footer::before{
  content:'NAYT';
  position:absolute;
  bottom:-8rem;
  left:50%;
  transform:translateX(-50%);
  font-family:var(--font-display);
  font-size:clamp(10rem,30vw,25rem);
  font-weight:900;
  color:rgba(255,255,255,.02);
  letter-spacing:-.05em;
  pointer-events:none;
  white-space:nowrap;
}
.footer-grid{
  display:grid;
  grid-template-columns:2fr 1fr 1fr 1fr;
  gap:var(--sp-12);
  margin-bottom:var(--sp-16);
  position:relative;
}
@media (max-width:900px){
  .footer-grid{grid-template-columns:1fr 1fr;gap:var(--sp-10)}
}
@media (max-width:520px){
  .footer-grid{grid-template-columns:1fr}
}
.footer-brand .logo{margin-bottom:var(--sp-6)}
.footer-brand p{
  color:var(--text-dim);
  margin-bottom:var(--sp-6);
  max-width:340px;
  font-size:var(--fs-sm);
}
.footer-socials{display:flex;gap:var(--sp-3)}
.footer-socials a{
  width:42px;
  height:42px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.05);
  border:1px solid var(--border);
  border-radius:50%;
  color:var(--text-muted);
  transition:all var(--t-base);
}
.footer-socials a:hover{
  background:var(--gradient-brand);
  color:var(--white);
  border-color:transparent;
  transform:translateY(-3px);
}
.footer-socials svg{width:18px;height:18px}

.footer-col h5{
  font-family:var(--font-body);
  font-size:var(--fs-xs);
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--white);
  margin-bottom:var(--sp-6);
}
.footer-col ul{display:flex;flex-direction:column;gap:var(--sp-3)}
.footer-col a{
  color:var(--text-muted);
  font-size:var(--fs-sm);
  transition:color var(--t-fast);
}
.footer-col a:hover{color:var(--teal)}

.footer-contact-item{
  display:flex;
  align-items:flex-start;
  gap:var(--sp-3);
  margin-bottom:var(--sp-3);
  color:var(--text-muted);
  font-size:var(--fs-sm);
}
.footer-contact-item svg{
  width:16px;
  height:16px;
  margin-top:3px;
  flex-shrink:0;
  color:var(--teal);
}

.footer-bottom{
  position:relative;
  padding-top:var(--sp-8);
  border-top:1px solid var(--border);
  display:flex;
  justify-content:space-between;
  align-items:center;
  color:var(--text-dim);
  font-size:var(--fs-xs);
  flex-wrap:wrap;
  gap:var(--sp-4);
}
.footer-bottom-links{display:flex;gap:var(--sp-6)}
.footer-bottom-links a{color:var(--text-dim);transition:color var(--t-fast)}
.footer-bottom-links a:hover{color:var(--teal)}

/* ===== PAGE HEADER (interior pages) ===== */
.page-header{
  position:relative;
  padding:calc(var(--header-h) + var(--sp-24)) 0 var(--sp-20);
  text-align:center;
  overflow:hidden;
}
.page-header::before{
  content:'';
  position:absolute;
  inset:0;
  background:radial-gradient(ellipse at center top,rgba(0,169,157,.15),transparent 60%);
  pointer-events:none;
}
.page-header h1{
  font-size:clamp(3rem,7vw,6rem);
  margin-bottom:var(--sp-6);
}
.breadcrumbs{
  display:flex;
  justify-content:center;
  gap:var(--sp-2);
  font-size:var(--fs-sm);
  color:var(--text-dim);
  font-family:var(--font-mono);
  letter-spacing:.05em;
}
.breadcrumbs a{color:var(--teal);transition:opacity var(--t-fast)}
.breadcrumbs a:hover{opacity:.7}
.breadcrumbs span{color:var(--text-dim)}

/* ===== CARDS ===== */
.card{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  padding:var(--sp-8);
  transition:all var(--t-base);
  position:relative;
  overflow:hidden;
}
.card::before{
  content:'';
  position:absolute;
  inset:0;
  background:var(--gradient-brand-soft);
  opacity:0;
  transition:opacity var(--t-base);
  pointer-events:none;
}
.card:hover{
  border-color:var(--border-strong);
  transform:translateY(-6px);
}
.card:hover::before{opacity:1}
.card > *{position:relative;z-index:1}

/* ===== ANIMATIONS COMMUNES ===== */
@keyframes fadeInUp{
  from{opacity:0;transform:translateY(40px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes fadeIn{
  from{opacity:0}
  to{opacity:1}
}
@keyframes scaleIn{
  from{opacity:0;transform:scale(.9)}
  to{opacity:1;transform:scale(1)}
}
@keyframes float{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-20px)}
}
@keyframes pulse{
  0%,100%{opacity:1}
  50%{opacity:.5}
}
@keyframes shimmer{
  0%{background-position:-200% center}
  100%{background-position:200% center}
}
@keyframes rotate{
  from{transform:rotate(0deg)}
  to{transform:rotate(360deg)}
}
@keyframes gradientShift{
  0%,100%{background-position:0% 50%}
  50%{background-position:100% 50%}
}

/* ===== GRAIN OVERLAY ===== */
.grain{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:1;
  opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}

/* ===== LOADER ===== */
.page-loader{
  position:fixed;
  inset:0;
  background:var(--black);
  z-index:var(--z-loader);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:var(--sp-6);
}
.page-loader.hidden{opacity:0;visibility:hidden;transition:all .8s var(--ease)}
.loader-logo{
  width:120px;
  height:120px;
  animation:pulse 1.5s ease-in-out infinite;
}
.loader-bar{
  width:200px;
  height:2px;
  background:rgba(255,255,255,.1);
  border-radius:2px;
  overflow:hidden;
  position:relative;
}
.loader-bar::after{
  content:'';
  position:absolute;
  inset:0;
  background:var(--gradient-brand);
  animation:loaderProgress 1.5s ease-in-out infinite;
}
@keyframes loaderProgress{
  0%{transform:translateX(-100%)}
  100%{transform:translateX(100%)}
}

/* ===== CUSTOM CURSOR ===== */
.cursor-dot,.cursor-ring{
  position:fixed;
  top:0;
  left:0;
  pointer-events:none;
  z-index:var(--z-cursor);
  transform:translate(-50%,-50%);
  border-radius:50%;
  mix-blend-mode:difference;
}
.cursor-dot{
  width:6px;
  height:6px;
  background:var(--white);
  transition:transform .15s var(--ease-out);
}
.cursor-ring{
  width:36px;
  height:36px;
  border:1.5px solid var(--white);
  transition:all .25s var(--ease-out);
}
.cursor-ring.hover{
  width:60px;
  height:60px;
  background:var(--white);
  border-color:var(--white);
}
@media (max-width:1024px){
  .cursor-dot,.cursor-ring{display:none}
}

/* ===== WHATSAPP FLOAT ===== */
.whatsapp-float{
  position:fixed;
  bottom:24px;
  right:24px;
  width:60px;
  height:60px;
  background:#25D366;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:var(--z-sticky);
  box-shadow:0 10px 30px rgba(37,211,102,.4);
  transition:all var(--t-base);
  animation:float 3s ease-in-out infinite;
}
.whatsapp-float:hover{
  transform:scale(1.1);
  box-shadow:0 15px 40px rgba(37,211,102,.6);
}
.whatsapp-float svg{width:32px;height:32px;color:var(--white)}

/* ===== REVEAL ANIMATIONS ===== */
[data-reveal]{
  opacity:0;
  transform:translateY(30px);
  transition:opacity .7s var(--ease),transform .7s var(--ease);
}
[data-reveal].in-view{opacity:1;transform:translateY(0)}
[data-reveal-delay="1"]{transition-delay:.08s}
[data-reveal-delay="2"]{transition-delay:.16s}
[data-reveal-delay="3"]{transition-delay:.24s}
[data-reveal-delay="4"]{transition-delay:.32s}
[data-reveal-delay="5"]{transition-delay:.4s}
[data-reveal-delay="6"]{transition-delay:.48s}

/* Si JS désactivé : tout est visible */
.no-js [data-reveal]{opacity:1;transform:none}

/* ===== UTILITIES ===== */
.flex{display:flex}
.flex-col{flex-direction:column}
.items-center{align-items:center}
.justify-center{justify-content:center}
.justify-between{justify-content:space-between}
.gap-2{gap:var(--sp-2)}
.gap-4{gap:var(--sp-4)}
.gap-6{gap:var(--sp-6)}
.text-center{text-align:center}
.relative{position:relative}
.w-full{width:100%}
.hidden{display:none}
@media (max-width:768px){
  .hide-mobile{display:none}
}
@media (min-width:769px){
  .show-mobile{display:none}
}