﻿/* Styles communs a toutes les pages */
/* Font Awesome est declare dans fonts.css et mappe en fin de fichier. */

.cursor-dot,.cursor-ring{display:none!important}

:root{--bg:#030305;--bg-2:#08080f;--card-bg:rgba(255,255,255,0.025);--card-border:rgba(255,255,255,0.065);--card-border-h:rgba(99,102,241,0.45);--primary:#6366f1;--primary-l:#818cf8;--primary-d:#4f46e5;--primary-glow:rgba(99,102,241,0.25);--accent:#8b5cf6;--accent-pink:#ec4899;--accent-cyan:#22d3ee;--gold:#f59e0b;--success:#22c55e;--text:#f1f5f9;--text-muted:#64748b;--text-sub:#94a3b8;--font-h:"Outfit",sans-serif;--font-b:"Space Grotesk",sans-serif;--ease:cubic-bezier(0.16,1,0.3,1);--ease-back:cubic-bezier(0.34,1.56,0.64,1);--tr:0.45s cubic-bezier(0.16,1,0.3,1);--r-xs:6px;--r-sm:10px;--r:14px;--r-lg:20px;--r-xl:28px;--sh:0 20px 60px rgba(0,0,0,0.5);--glow:0 0 40px rgba(99,102,241,0.22)}

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

@media (hover:none){body{cursor:auto}}

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

ul{list-style:none}

img{max-width:100%}

button{font-family:inherit}

::-webkit-scrollbar{width:4px}

::-webkit-scrollbar-track{background:var(--bg)}

::-webkit-scrollbar-thumb{background:linear-gradient(var(--primary),var(--accent));border-radius:10px}

.scroll-progress{position:fixed;top:0;left:0;height:2px;background:linear-gradient(90deg,var(--primary),var(--accent),var(--accent-pink));z-index:9999;transition:width .08s linear}

.cursor-dot,.cursor-ring{position:fixed;border-radius:50%;pointer-events:none;transform:translate(-50%,-50%);will-change:left,top;mix-blend-mode:difference}

.cursor-dot{width:5px;height:5px;background:#fff;z-index:9998;transition:width .2s,height .2s,opacity .2s}

.cursor-ring{width:36px;height:36px;border:1.5px solid rgba(255,255,255,.6);z-index:9997;opacity:.7;transition:width .4s var(--ease),height .4s var(--ease),border-color .3s,opacity .3s,background .3s}

.bg-grid{position:fixed;inset:0;z-index:-3;background-image:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);background-size:60px 60px;mask-image:radial-gradient(ellipse at 50% 20%,black 30%,transparent 75%)}

.bg-glow{position:fixed;top:-30%;left:50%;transform:translateX(-50%);width:90vw;height:90vw;background:radial-gradient(ellipse at center,rgba(99,102,241,.1) 0%,rgba(139,92,246,.05) 40%,transparent 70%);filter:blur(90px);z-index:-2;animation:auroraShift 18s ease-in-out infinite alternate}

.bg-glow::after{content:"";position:absolute;bottom:-20%;right:-10%;width:60vw;height:60vw;background:radial-gradient(ellipse at center,rgba(236,72,153,.05) 0%,transparent 60%);filter:blur(80px);animation:auroraShift 22s ease-in-out infinite alternate-reverse}

@keyframes auroraShift{0%{transform:translateX(-50%) scale(1) rotate(0deg);opacity:.6}100%{transform:translateX(-46%) scale(1.12) rotate(4deg);opacity:1}}

.container{max-width:1200px;margin:0 auto;padding:0 2rem}

.text-gradient{background:linear-gradient(135deg,#fff 0%,var(--primary-l) 40%,var(--accent) 70%,var(--accent-pink) 100%);background-size:200% 200%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:gradShift 8s ease infinite}

@keyframes gradShift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}

.badge::before{content:"";width:6px;height:6px;background:var(--primary);border-radius:50%;box-shadow:0 0 8px var(--primary);animation:pingDot 2s ease-in-out infinite}

@keyframes pingDot{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.5);opacity:.6}}

.section-label::before{content:"â—† ";font-size:.58rem}

.header::before{content:"";position:absolute;inset:0;background:rgba(3,3,5,.01);backdrop-filter:blur(0px);-webkit-backdrop-filter:blur(0px);transition:var(--tr);z-index:-1;border-bottom:1px solid transparent}

.header.scrolled::before{background:rgba(3,3,5,.88);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border-bottom-color:var(--card-border)}

.nav-wrapper{display:flex;justify-content:space-between;align-items:center;gap:1rem}

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

.logo img{transition:var(--tr);filter:drop-shadow(0 0 12px rgba(99,102,241,.25))}

.logo:hover img{filter:drop-shadow(0 0 22px rgba(99,102,241,.5));transform:scale(1.03)}

.nav-list{display:flex;align-items:center;gap:.2rem}

.nav-link{position:relative;padding:.45rem .8rem;font-size:.87rem;font-weight:500;color:var(--text-sub);border-radius:var(--r-xs);transition:color .3s,background .3s}

.nav-link::after{content:"";position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:0;height:1.5px;background:var(--primary);border-radius:2px;transition:width .3s var(--ease)}

.nav-link:hover::after,.nav-link.active::after{width:55%}

.btn-primary::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,var(--primary) 0%,var(--accent) 100%);opacity:0;transition:opacity .3s}

.btn-primary::after{content:"";position:absolute;top:50%;left:-60%;transform:translateY(-50%) skewX(-20deg);width:40%;height:100%;background:rgba(255,255,255,.18);transition:left .5s var(--ease)}

.btn-primary:hover::before{opacity:1}

.btn-primary:hover::after{left:130%}

.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 30px rgba(99,102,241,.4),0 0 0 1px rgba(99,102,241,.25)}

.btn-primary span{position:relative;z-index:1}

.btn-secondary:hover{border-color:rgba(99,102,241,.4);color:var(--text);background:rgba(99,102,241,.05);transform:translateY(-2px)}

.hamburger{flex-direction:column;gap:5px;cursor:pointer;padding:8px;z-index:1001;border-radius:var(--r-xs);transition:background .3s}

.hamburger:hover{background:rgba(255,255,255,.05)}

.hamburger:hover .bar:nth-child(2){width:24px}

.hero::before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:700px;height:700px;background:radial-gradient(circle,rgba(99,102,241,.1) 0%,transparent 65%);border-radius:50%;filter:blur(50px);pointer-events:none;z-index:0}

.hero-visual::before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:320px;height:320px;background:radial-gradient(circle,rgba(99,102,241,.16) 0%,transparent 70%);border-radius:50%;filter:blur(30px);animation:pulseGlow 4s ease-in-out infinite alternate}

.hero-visual::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:400px;height:400px;border:1px dashed rgba(99,102,241,.1);border-radius:50%;animation:orbitSpin 30s linear infinite}

@keyframes orbitSpin{from{transform:translate(-50%,-50%) rotate(0deg)}to{transform:translate(-50%,-50%) rotate(360deg)}}

.card-glass::before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(135deg,rgba(255,255,255,.04) 0%,transparent 50%);pointer-events:none}

@keyframes floatCard{0%,100%{transform:translateY(0) rotate(0deg)}33%{transform:translateY(-18px) rotate(.8deg)}66%{transform:translateY(8px) rotate(-.4deg)}}

.apple-card:hover .price{opacity:1}

.marquee-container::before,.marquee-container::after{content:"";position:absolute;top:0;bottom:0;width:120px;z-index:2}

.marquee-container::before{left:0;background:linear-gradient(to right,var(--primary),transparent)}

.marquee-container::after{right:0;background:linear-gradient(to left,var(--primary),transparent)}

@keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

.process-grid::before{content:"";position:absolute;top:46px;left:25%;right:25%;height:1px;background:linear-gradient(90deg,transparent,var(--primary),var(--accent),transparent);opacity:.3;z-index:0}

.process-card::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(99,102,241,.04) 0%,transparent 60%);opacity:0;transition:opacity .4s;border-radius:inherit}

.process-card:hover::before{opacity:1}

.process-card:hover{transform:translateY(-10px);border-color:rgba(99,102,241,.3);box-shadow:0 25px 60px rgba(0,0,0,.4),var(--glow)}

.process-card:hover .icon-box{background:var(--primary);border-color:var(--primary);box-shadow:0 0 30px var(--primary-glow),0 0 0 6px rgba(99,102,241,.1)}

.process-card:hover .icon-box i{color:#fff}

.boutiques-hero::before{content:"";position:absolute;top:-50%;right:-10%;width:500px;height:500px;background:radial-gradient(circle,rgba(99,102,241,.09) 0%,transparent 60%);filter:blur(40px);pointer-events:none}

.boutiques-hero:hover{border-color:rgba(99,102,241,.18)}

.mega-cta-btn::before{content:"";position:absolute;top:50%;left:-50%;transform:translateY(-50%) skewX(-15deg);width:30%;height:100%;background:rgba(255,255,255,.16);transition:left .5s var(--ease)}

.mega-cta-btn:hover::before{left:130%}

.mega-cta-btn:hover{transform:translateY(-3px);box-shadow:0 20px 60px rgba(99,102,241,.45)}

.mega-cta-btn:hover i{transform:translateX(5px)}

.floating-logo:hover{border-color:var(--primary);box-shadow:var(--glow);color:var(--primary-l)}

@keyframes floatLogo{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}

@keyframes floatLogo1{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-14px)}}

.testimonial-card::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(99,102,241,.4),transparent);opacity:0;transition:opacity .4s}

.testimonial-card:hover::before{opacity:1}

.testimonial-card:hover{border-color:rgba(99,102,241,.2);transform:translateY(-5px);box-shadow:var(--sh)}

.testimonial-card>p::before{content:"\"";position:absolute;left:0;top:-.2rem;font-size:2.5rem;line-height:1;color:var(--primary);font-style:normal;font-family:var(--font-h);opacity:.4}

.faq-question:hover{background:rgba(255,255,255,.02)}

.footer{border-top:1px solid var(--card-border);padding:4rem 0 2rem;margin-top:2rem;position:relative}

.footer::before{content:"";position:absolute;top:-1px;left:50%;transform:translateX(-50%);width:200px;height:1px;background:linear-gradient(90deg,transparent,var(--primary),var(--accent),transparent)}

.footer-content{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:3rem;margin-bottom:3rem}

.footer h4{font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:var(--text-sub);margin-bottom:1.25rem}

.footer-col a{display:flex;align-items:center;gap:.5rem;color:var(--text-muted);margin-bottom:.65rem;font-size:.88rem;transition:color .3s,transform .3s}

.footer-col a:hover{color:var(--primary-l);transform:translateX(4px)}

.footer-bottom{text-align:center;color:var(--text-muted);font-size:.8rem;padding-top:2rem;border-top:1px solid var(--card-border)}

@keyframes pulseGlow{0%{opacity:.5;transform:scale(1)}100%{opacity:1;transform:scale(1.1)}}

@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-20px)}}

@keyframes fadeInUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}

.stepper-step:hover{border-color:rgba(99,102,241,.4);color:var(--primary-l)}

.stepper-prev:hover:not(:disabled){border-color:var(--card-border-h);background:rgba(255,255,255,.04)}

.stepper-next:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 30px rgba(99,102,241,.42)}

.stepper-prev:disabled,.stepper-next:disabled{opacity:.4;cursor:not-allowed;transform:none}

.shop-tag:hover{border-color:rgba(99,102,241,.4);background:rgba(99,102,241,.06);color:var(--primary-l);transform:translateY(-2px)}

.cta-card::before{content:"";position:absolute;inset:0;opacity:.04;background-image:radial-gradient(#fff 1px,transparent 1px);background-size:24px 24px}

.info-card:hover{border-color:rgba(99,102,241,.25);transform:translateY(-4px);box-shadow:var(--sh)}

.service-card:hover{transform:translateY(-5px);border-color:rgba(99,102,241,.3);box-shadow:0 20px 40px rgba(0,0,0,.35),var(--glow)}

.service-card.special-card:hover{border-color:rgba(234,179,8,.3);box-shadow:0 20px 40px rgba(0,0,0,.35),0 0 30px rgba(234,179,8,.1)}

#shopSearch:focus{border-color:rgba(99,102,241,.4);background:rgba(99,102,241,.03);box-shadow:0 0 0 3px rgba(99,102,241,.1)}

#shopSearch::placeholder{color:var(--text-muted)}

.filter-btn:hover{background:rgba(99,102,241,.09);border-color:rgba(99,102,241,.4);color:var(--primary-l)}

.shop-card:hover{border-color:rgba(99,102,241,.28);transform:translateY(-4px);box-shadow:var(--sh),var(--glow)}

.timeline::before{content:"";position:absolute;left:0;right:0;top:60px;height:1.5px;background:linear-gradient(90deg,var(--primary),var(--accent));opacity:.25;z-index:0}

.timeline-item:hover .timeline-marker{transform:scale(1.08);box-shadow:0 8px 28px rgba(99,102,241,.3);border-color:var(--accent)}

.timeline-content:hover{border-color:rgba(99,102,241,.3);box-shadow:0 4px 20px rgba(99,102,241,.12)}

.user-chip{display:flex;align-items:center;gap:.5rem;background:rgba(99,102,241,.08);border:1px solid rgba(99,102,241,.22);border-radius:50px;padding:.35rem .85rem .35rem .75rem;flex-shrink:0}

.user-name{display:flex;align-items:center;gap:.4rem;font-size:.82rem;font-weight:600;color:var(--primary-l);white-space:nowrap}

.logout-btn{display:flex;align-items:center;justify-content:center;width:26px;height:26px;background:none;border:none;border-radius:50%;color:var(--text-muted);font-size:.8rem;cursor:pointer;transition:color .25s,background .25s;margin-left:.1rem}

.logout-btn:hover{color:#f43f5e;background:rgba(244,63,94,.1)}

@media (max-width:768px){body{overflow-x:hidden}*{max-width:100%}img{max-width:100%}}

@keyframes rippleOut{to{transform:scale(1);opacity:0}}

.hamburger{display:none;background:none;border:0;color:inherit}

.hamburger .bar{display:block;width:24px;height:2px;background:var(--text);border-radius:999px;transition:transform .25s,opacity .25s,width .25s}

.hamburger.active .bar:nth-child(1){transform:translateY(7px) rotate(45deg)}

.hamburger.active .bar:nth-child(2){opacity:0}

.hamburger.active .bar:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.nav.open{right:0!important}

body.nav-open{overflow:hidden}

body.nav-open .floating-actions{
  display:none;
}
/* ===== Stepper : ameliorations =====*/
/* Bloc "format a respecter" (boxing etape 2 et autres formats) */
.format-block {
  display: inline-block;
  text-align: left;
  font-family: 'Space Grotesk', 'Courier New', monospace;
  font-size: 0.95rem;
  color: var(--text-sub);
  background: rgba(99, 102, 241, 0.05);
  border: 1px solid var(--card-border);
  border-left: 3px solid var(--primary, #6366f1);
  border-radius: 10px;
  padding: 1.25rem 1.5rem;
  margin: 1rem auto 2rem;
  white-space: pre-line;
  line-height: 1.8;
}

.format-inline {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1rem;
  color: var(--text-sub);
  letter-spacing: 0.02em;
  margin-top: 0.5rem;
}

/* Ã‰tat "franchi" du stepper (Ã©tapes dÃ©jÃ  passÃ©es) */
.stepper-step.completed {
  background: rgba(99, 102, 241, 0.15);
  border-color: var(--primary, #6366f1);
  color: var(--primary, #6366f1);
}

.stepper-line.completed {
  background: linear-gradient(90deg, var(--primary, #6366f1), var(--accent, #8b5cf6));
}

/* Boutons stepper dÃ©sactivÃ©s */
.stepper-prev[disabled],
.stepper-next[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
}

/* ===== Refresh visuel global ===== */
:root{
  --bg:#050607;
  --bg-2:#0b1012;
  --card-bg:rgba(255,255,255,0.045);
  --card-border:rgba(255,255,255,0.105);
  --card-border-h:rgba(45,212,191,0.48);
  --primary:#2dd4bf;
  --primary-l:#67e8f9;
  --primary-d:#0f766e;
  --primary-glow:rgba(45,212,191,0.22);
  --accent:#f59e0b;
  --accent-pink:#fb7185;
  --accent-cyan:#22d3ee;
  --text:#f8fafc;
  --text-muted:#7f8ea3;
  --text-sub:#b4c0cf;
  --r-sm:12px;
  --r:16px;
  --r-lg:18px;
  --r-xl:24px;
  --sh:0 22px 70px rgba(0,0,0,0.44);
  --glow:0 0 42px rgba(45,212,191,0.18);
}

body{
  background:
    radial-gradient(circle at 12% 8%,rgba(45,212,191,0.12),transparent 28rem),
    radial-gradient(circle at 88% 18%,rgba(245,158,11,0.09),transparent 25rem),
    linear-gradient(180deg,#050607 0%,#091012 48%,#050607 100%) !important;
  -webkit-user-select:none;
  user-select:none;
  -webkit-touch-callout:none;
}

input,
textarea{
  -webkit-user-select:text;
  user-select:text;
  -webkit-touch-callout:default;
}

img,
svg{
  -webkit-user-drag:none;
  user-drag:none;
}

.bg-grid{opacity:.22}

.bg-glow{opacity:.72;filter:saturate(1.1)}

.header::before{
  background:rgba(5,6,7,.18);
  border-bottom:1px solid rgba(255,255,255,.04);
}

.header.scrolled::before{
  background:rgba(5,8,9,.86);
  border-bottom-color:rgba(255,255,255,.1);
  box-shadow:0 12px 34px rgba(0,0,0,.28);
}

.nav-link{
  border-radius:999px;
  padding:.48rem .86rem;
}

.nav-wrapper .logo img,
.header .logo img{
  height:84px !important;
  width:auto;
}

.nav-link:hover,
.nav-link.active{
  background:rgba(45,212,191,.1) !important;
  color:var(--primary-l) !important;
}

.btn-primary,
.mega-cta-btn,
.stepper-next{
  background:linear-gradient(135deg,#14b8a6 0%,#22d3ee 58%,#f59e0b 140%) !important;
  color:#031313 !important;
  font-weight:800;
  box-shadow:0 10px 30px rgba(45,212,191,.22);
}

.btn-primary:hover,
.mega-cta-btn:hover,
.stepper-next:hover:not(:disabled){
  box-shadow:0 16px 42px rgba(45,212,191,.28),0 0 0 1px rgba(255,255,255,.16);
}

.btn-secondary{
  background:rgba(255,255,255,.035);
  border-color:rgba(255,255,255,.13);
  color:var(--text-sub);
}

.btn-secondary:hover{
  border-color:rgba(45,212,191,.48);
  color:var(--primary-l);
  background:rgba(45,212,191,.075);
}

.badge,
.pre-title{
  background:rgba(45,212,191,.085) !important;
  border-color:rgba(45,212,191,.28) !important;
  color:var(--primary-l) !important;
}

.badge::before{
  background:var(--accent);
  box-shadow:0 0 12px var(--accent);
}

.text-gradient{
  background:linear-gradient(135deg,#fff 0%,#67e8f9 42%,#2dd4bf 66%,#fbbf24 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}

.card,
.process-card,
.testimonial-card,
.faq-item,
.card-glass,
.boutique-item,
.detail-box,
.info-card,
.service-card,
.timeline-content,
.stepper-process,
.pricing-section,
.contact-card,
.cta-contact,
.boutiques-hero{
  background:linear-gradient(145deg,rgba(255,255,255,.07),rgba(255,255,255,.028)) !important;
  border-color:rgba(255,255,255,.115) !important;
  box-shadow:0 18px 54px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.055);
}

.card:hover,
.process-card:hover,
.testimonial-card:hover,
.faq-item:hover,
.boutique-item:hover,
.detail-box:hover,
.info-card:hover,
.service-card:hover{
  border-color:rgba(45,212,191,.38) !important;
  box-shadow:0 24px 70px rgba(0,0,0,.4),0 0 0 1px rgba(45,212,191,.08),var(--glow);
}

.icon-box,
.card-icon,
.author-avatar,
.stepper-step.active,
.category-header{
  background:linear-gradient(135deg,rgba(45,212,191,.2),rgba(245,158,11,.13)) !important;
  border-color:rgba(45,212,191,.32) !important;
}

.icon-box i,
.card-icon i,
.hero-icon,
.hero-feature i,
.category-header i,
.boutique-icon,
.detail-box i,
.arrow,
.faq-question i{
  color:var(--primary-l) !important;
}

.marquee-container{
  background:linear-gradient(90deg,#2dd4bf,#f59e0b) !important;
  transform:rotate(-.8deg) scale(1.03);
}

.marquee-content span{
  color:rgba(3,19,19,.78) !important;
}

.search-bar input,
.cat-btn{
  background:rgba(255,255,255,.045) !important;
  border-color:rgba(255,255,255,.13) !important;
}

.search-bar input:focus,
.cat-btn:hover{
  border-color:rgba(45,212,191,.5) !important;
  box-shadow:0 0 0 4px rgba(45,212,191,.12) !important;
}

.cat-btn.active{
  background:linear-gradient(135deg,#14b8a6,#22d3ee) !important;
  color:#031313 !important;
}

.footer{
  background:linear-gradient(180deg,rgba(5,6,7,.3),rgba(5,6,7,.92));
}

.footer::before,
.process-grid::before,
.timeline::before,
.scroll-progress{
  background:linear-gradient(90deg,#2dd4bf,#22d3ee,#f59e0b) !important;
}

.faq-item.open{
  border-color:rgba(45,212,191,.42) !important;
}

.faq-item.open .faq-question{
  background:rgba(45,212,191,.075);
}

.faq-item.open .faq-question i{
  transform:rotate(180deg);
}

.faq-answer p{
  border-top:1px solid rgba(255,255,255,.08);
  margin:0 1.5rem;
  padding:1.1rem 0 1.35rem !important;
}

.hero-title,
.section-title,
.hero-page-content h1,
.hero-boutiques-content h1{
  text-shadow:0 18px 42px rgba(0,0,0,.32);
}

.hero,
.hero-page,
.hero-boutiques{
  position:relative;
}

.hero::after,
.hero-page::after,
.hero-boutiques::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:0;
  width:min(920px,82vw);
  height:1px;
  transform:translateX(-50%);
  background:linear-gradient(90deg,transparent,rgba(45,212,191,.42),rgba(245,158,11,.28),transparent);
  pointer-events:none;
}

.card-icon,
.icon-box{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 12px 28px rgba(45,212,191,.12);
}

.stepper-card{
  background:rgba(255,255,255,.025);
  border-radius:var(--r);
}

.warning-box{
  background:rgba(245,158,11,.11) !important;
  border-color:rgba(245,158,11,.42) !important;
}

.floating-actions{
  position:fixed;
  right:22px;
  bottom:22px;
  display:flex;
  flex-direction:column;
  gap:12px;
  z-index:1200;
}

.floating-action{
  width:52px;
  height:52px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(255,255,255,.14);
  border-radius:50%;
  background:rgba(7,12,13,.82);
  color:var(--text);
  box-shadow:0 16px 42px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  cursor:pointer;
  transition:transform .25s var(--ease),opacity .25s,border-color .25s,background .25s;
}

.floating-action:hover{
  transform:translateY(-3px);
  border-color:rgba(45,212,191,.42);
  background:rgba(45,212,191,.14);
  color:var(--primary-l);
}

.telegram-action{
  background:linear-gradient(135deg,#14b8a6,#22d3ee);
  color:#031313;
  border-color:transparent;
  font-size:1.45rem;
}

.back-to-top{
  opacity:0;
  pointer-events:none;
}

.back-to-top.visible{
  opacity:1;
  pointer-events:auto;
}

.no-results{
  text-align:center;
  max-width:520px;
  margin:2rem auto 0;
  padding:2.5rem 2rem;
  border:1px solid rgba(255,255,255,.12);
  border-radius:var(--r-lg);
  background:linear-gradient(145deg,rgba(255,255,255,.07),rgba(255,255,255,.028));
  box-shadow:0 18px 54px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.055);
}

.no-results i{
  color:var(--primary-l);
  font-size:2rem;
  margin-bottom:1rem;
}

.no-results h3{
  margin-bottom:.5rem;
}

.no-results p{
  color:var(--text-sub);
}

.results-counter{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.35rem;
  width:max-content;
  max-width:100%;
  margin:0 auto 1.5rem;
  padding:.7rem 1rem;
  border:1px solid rgba(255,255,255,.11);
  border-radius:999px;
  background:rgba(255,255,255,.045);
  color:var(--text-sub);
  font-size:.92rem;
  font-weight:700;
}

.results-counter span{
  color:var(--primary-l);
  font-size:1.05rem;
}

::selection{
  background:rgba(45,212,191,.35);
  color:#fff;
}

@media (max-width:992px){
  .nav-wrapper .logo img,
  .header .logo img{
    height:72px !important;
    filter:drop-shadow(0 0 16px rgba(45,212,191,.28)) drop-shadow(0 8px 18px rgba(0,0,0,.5));
  }

  .nav-wrapper .logo{
    display:flex;
    align-items:center;
    padding:0;
    margin-left:-.35rem;
    border-radius:0;
    background:transparent;
    box-shadow:none;
  }

  .nav{
    background:rgba(5,8,9,.97) !important;
    border-left-color:rgba(45,212,191,.2) !important;
  }

}

@media (max-width:768px){
  .nav-wrapper{
    gap:.75rem;
  }

  .nav-wrapper > .btn-primary{
    max-width:132px;
    min-height:36px;
  }

  .hero-title,
  .hero-page-content h1,
  .hero-boutiques-content h1{
    line-height:1.08 !important;
  }

  .stats-row{
    justify-content:center;
    flex-wrap:wrap;
  }

  .faq-question{
    gap:1rem;
  }

  .faq-question span{
    line-height:1.35;
  }

  .details-grid,
  .grid,
  .grid-3{
    gap:1rem !important;
  }

  .boutique-trigger{
    gap:1rem;
  }
}

@media (max-width:480px){
  .nav-wrapper .logo img,
  .header .logo img{
    height:66px !important;
  }

  .nav-wrapper > .btn-primary{
    font-size:.68rem !important;
    padding:.36rem .58rem !important;
  }

  .hero-buttons .btn-primary,
  .hero-buttons .btn-secondary{
    max-width:none !important;
  }

  .floating-actions{
    right:14px;
    bottom:14px;
    gap:10px;
  }

  .floating-action{
    width:46px;
    height:46px;
  }
}

/* Centralised base styles shared by every page. */
html{scroll-behavior:smooth;font-size:16px}

body{background:var(--bg);color:var(--text);font-family:var(--font-b);overflow-x:hidden;line-height:1.65;-webkit-font-smoothing:antialiased}

h1,h2,h3,h4{font-family:var(--font-h);font-weight:700;color:var(--text);line-height:1.1;letter-spacing:-0.02em}

.badge{display:inline-flex;align-items:center;gap:.5rem;padding:.45rem 1.1rem;background:rgba(99,102,241,.09);border:1px solid rgba(99,102,241,.28);border-radius:50px;font-size:.77rem;font-weight:600;text-transform:uppercase;letter-spacing:1.5px;color:var(--primary-l);margin-bottom:1.25rem}

.section-label{display:inline-block;font-size:.73rem;font-weight:700;text-transform:uppercase;letter-spacing:2px;color:var(--primary-l);margin-bottom:.75rem}

.header{position:fixed;top:0;width:100%;z-index:100;padding:1.5rem 0;transition:var(--tr)}

.header.scrolled{padding:.9rem 0}

.nav-link:hover,.nav-link.active{color:var(--text);background:rgba(255,255,255,.04)}

.nav-link.active{color:var(--primary-l)}

.btn-primary{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.75rem 1.5rem;background:var(--primary);color:#fff;border-radius:var(--r-sm);font-weight:600;font-size:.9rem;overflow:hidden;transition:var(--tr);border:none;white-space:nowrap}

.btn-primary.large{padding:1rem 2.2rem;font-size:1rem;border-radius:var(--r)}

.btn-secondary{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.75rem 1.5rem;background:transparent;border:1px solid var(--card-border);color:var(--text-sub);border-radius:var(--r-sm);font-weight:600;font-size:.9rem;transition:var(--tr);overflow:hidden}

.section{padding:8rem 0;position:relative}

.hero-page{padding:10rem 0 5rem;text-align:center;position:relative}

.hero-page-content{max-width:800px;margin:0 auto}

.hero-page h1{font-size:3.5rem;font-weight:900;letter-spacing:-0.03em;margin:1rem 0}

.hero-page p{font-size:1.12rem;color:var(--text-sub);margin-top:1rem;line-height:1.75}

@media (max-width:992px){
  .container{padding:0 1.5rem}
  .nav{position:fixed;top:0;right:-100%;width:300px;height:100vh;background:rgba(5,5,10,.97);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);padding:6rem 2rem 2rem;transition:right .4s var(--ease);z-index:999;border-left:1px solid var(--card-border)}
  .nav-list{flex-direction:column;gap:1.5rem}
  .nav-link{font-size:1.15rem;padding:.5rem 0;width:100%}
  .hamburger{display:flex}
  .nav-wrapper .btn-primary{font-size:.72rem;padding:.38rem .75rem;min-width:auto;order:2}
  .process-grid::before,.timeline::before{display:none}
  .footer-content{grid-template-columns:repeat(2,1fr)}
  .section{padding:5rem 0}
  .hero-page h1{font-size:2.6rem}
}

@media (max-width:768px){
  .container{padding:0 1rem}
  h1{font-size:2.2rem}
  h2{font-size:1.9rem}
  h3{font-size:1.35rem}
  .hero-page{padding:110px 0 55px}
  .hero-page-content h1{font-size:2rem}
  .hero-page p{font-size:.95rem}
  .section{padding:4rem 0}
  .footer-content{grid-template-columns:1fr;gap:2rem;text-align:center}
  .footer-col a{justify-content:center}
  .nav{width:100%}
  .logo img{height:38px!important}
  .badge{font-size:.72rem}
}

@media (max-width:480px){
  .container{padding:0 .85rem}
  h1,.hero-page-content h1{font-size:1.85rem}
  h2{font-size:1.6rem}
  .section{padding:3rem 0}
  .btn-primary,.btn-secondary{font-size:.85rem;padding:.65rem 1.1rem}
}

@media (max-width:768px) and (orientation:landscape){
  .hero-page{padding:80px 0 40px}
  .section{padding:40px 0}
}

/* Font Awesome glyph overrides use escaped codepoints instead of fragile copied private-use characters. */
.fa-solid,.fa-brands{display:inline-block;font-style:normal;font-variant:normal;line-height:1;text-rendering:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.fa-solid{font-family:"Font Awesome 6 Free";font-weight:900}
.fa-brands{font-family:"Font Awesome 6 Brands";font-weight:400}
.fa-amazon:before{content:"\f270"}
.fa-apple:before{content:"\f179"}
.fa-bitcoin:before{content:"\f379"}
.fa-paypal:before{content:"\f1ed"}
.fa-telegram:before{content:"\f2c6"}
.fa-arrow-right:before{content:"\f061"}
.fa-arrow-up:before{content:"\f062"}
.fa-bag-shopping:before{content:"\f290"}
.fa-ban:before{content:"\f05e"}
.fa-basketball:before{content:"\f434"}
.fa-bed:before{content:"\f236"}
.fa-bolt:before{content:"\f0e7"}
.fa-book:before{content:"\f02d"}
.fa-box:before{content:"\f466"}
.fa-box-open:before{content:"\f49e"}
.fa-brain:before{content:"\f5dc"}
.fa-building-columns:before{content:"\f19c"}
.fa-camera:before{content:"\f030"}
.fa-car:before{content:"\f1b9"}
.fa-cart-shopping:before{content:"\f07a"}
.fa-chair:before{content:"\f6c0"}
.fa-check:before{content:"\f00c"}
.fa-check-double:before{content:"\f560"}
.fa-chevron-down:before{content:"\f078"}
.fa-circle-check:before{content:"\f058"}
.fa-clock:before{content:"\f017"}
.fa-comment-dots:before{content:"\f4ad"}
.fa-comments:before{content:"\f086"}
.fa-crown:before{content:"\f521"}
.fa-desktop:before{content:"\f390"}
.fa-diamond:before{content:"\f219"}
.fa-dumbbell:before{content:"\f44b"}
.fa-earth-europe:before{content:"\f7a2"}
.fa-envelope:before{content:"\f0e0"}
.fa-fire:before{content:"\f06d"}
.fa-flask:before{content:"\f0c3"}
.fa-gavel:before{content:"\f0e3"}
.fa-gem:before{content:"\f3a5"}
.fa-gift:before{content:"\f06b"}
.fa-glasses:before{content:"\f530"}
.fa-graduation-cap:before{content:"\f19d"}
.fa-grip:before{content:"\f58d"}
.fa-hand-back-fist:before{content:"\f255"}
.fa-headphones:before{content:"\f025"}
.fa-heart:before{content:"\f004"}
.fa-home:before{content:"\f015"}
.fa-infinity:before{content:"\f534"}
.fa-kitchen-set:before{content:"\e51a"}
.fa-laptop:before{content:"\f109"}
.fa-lightbulb:before{content:"\f0eb"}
.fa-microchip:before{content:"\f2db"}
.fa-mobile-screen-button:before{content:"\f3cd"}
.fa-mountain:before{content:"\f6fc"}
.fa-paper-plane:before{content:"\f1d8"}
.fa-paw:before{content:"\f1b0"}
.fa-person-running:before{content:"\f70c"}
.fa-plane:before{content:"\f072"}
.fa-plus:before{content:"\2b"}
.fa-puzzle-piece:before{content:"\f12e"}
.fa-robot:before{content:"\f544"}
.fa-rocket:before{content:"\f135"}
.fa-rotate-left:before{content:"\f2ea"}
.fa-sack-dollar:before{content:"\f81d"}
.fa-search:before,.fa-magnifying-glass:before{content:"\f002"}
.fa-shield:before{content:"\f132"}
.fa-shield-halved:before{content:"\f3ed"}
.fa-shirt:before,.fa-tshirt:before{content:"\f553"}
.fa-shoe-prints:before{content:"\f54b"}
.fa-shop:before{content:"\f54f"}
.fa-spray-can:before{content:"\f5bd"}
.fa-star:before{content:"\f005"}
.fa-store:before{content:"\f54e"}
.fa-suitcase-rolling:before{content:"\f5c1"}
.fa-tag:before{content:"\f02b"}
.fa-tags:before{content:"\f02c"}
.fa-triangle-exclamation:before{content:"\f071"}
.fa-trophy:before{content:"\f091"}
.fa-truck:before{content:"\f0d1"}
.fa-truck-fast:before{content:"\f48b"}
.fa-user:before{content:"\f007"}
.fa-user-tie:before{content:"\f508"}
.fa-users:before{content:"\f0c0"}
.fa-vest:before{content:"\e085"}
.fa-volume-high:before{content:"\f028"}
.fa-wallet:before{content:"\f555"}
.fa-xmark:before{content:"\f00d"}

/* Mobile polish */
@media (max-width:992px){
  .header{
    padding:.75rem 0;
  }

  .header::before,
  .header.scrolled::before{
    background:rgba(5,8,9,.92);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    border-bottom-color:rgba(255,255,255,.08);
  }

  .nav-wrapper{
    min-height:58px;
  }

  .nav-wrapper .logo img,
  .header .logo img,
  .logo img{
    height:54px !important;
    filter:drop-shadow(0 0 12px rgba(45,212,191,.22));
  }

  .nav-wrapper .logo{
    margin-left:0;
  }

  .nav{
    width:min(86vw,360px);
    padding:5.25rem 1.4rem 2rem;
    background:rgba(5,8,9,.98) !important;
    border-left:1px solid rgba(45,212,191,.18);
    box-shadow:-24px 0 60px rgba(0,0,0,.42);
  }

  .nav-list{
    gap:.65rem;
  }

  .nav-link{
    display:flex;
    align-items:center;
    min-height:46px;
    padding:.75rem 1rem;
    border:1px solid rgba(255,255,255,.07);
    background:rgba(255,255,255,.035);
    font-size:1rem;
  }

  .hamburger{
    width:44px;
    height:44px;
    align-items:center;
    justify-content:center;
    background:rgba(255,255,255,.045);
    border:1px solid rgba(255,255,255,.1);
    border-radius:12px;
  }
}

@media (max-width:768px){
  .container{
    padding:0 1.05rem;
  }

  .header{
    padding:.55rem 0;
  }

  .nav-wrapper{
    gap:.6rem;
  }

  .nav-wrapper > .btn-primary{
    display:none;
  }

  .section{
    padding:3.5rem 0;
  }

  .hero,
  .referral-hero,
  .money-hero,
  .coming-soon,
  .hero-page,
  .hero-boutiques{
    min-height:auto;
    padding-top:96px !important;
    padding-bottom:46px !important;
  }

  .hero-title,
  .referral-copy h1,
  .money-copy h1,
  .coming-soon-copy h1,
  .hero-page-content h1,
  .hero-boutiques-content h1{
    font-size:clamp(2rem,9vw,2.65rem) !important;
    line-height:1.08 !important;
    letter-spacing:-.03em !important;
  }

  .section-title,
  .referral-cta h2,
  .money-cta h2,
  .pricing-section h2{
    font-size:clamp(1.75rem,7.2vw,2.2rem) !important;
    line-height:1.12 !important;
  }

  .hero-subtitle,
  .referral-copy p,
  .money-copy p,
  .coming-soon-copy p,
  .section-desc,
  .hero-page p,
  .hero-boutiques-content p{
    font-size:.96rem !important;
    line-height:1.7 !important;
  }

  .badge,
  .pre-title,
  .section-label{
    font-size:.68rem !important;
    letter-spacing:1px !important;
  }

  .process-card,
  .testimonial-card,
  .tier-card,
  .path-card,
  .step-row,
  .card,
  .detail-box,
  .info-card,
  .service-card,
  .commission-panel,
  .money-panel,
  .coming-soon-card,
  .plan-card,
  .referral-cta,
  .money-cta,
  .boutiques-hero,
  .stepper-process{
    border-radius:16px !important;
    padding:1.35rem !important;
  }

  .floating-actions{
    right:12px;
    bottom:12px;
    gap:8px;
  }

  .floating-action{
    width:44px;
    height:44px;
  }
}

@media (max-width:480px){
  .container{
    padding:0 .9rem;
  }

  .nav-wrapper .logo img,
  .header .logo img,
  .logo img{
    height:48px !important;
  }

  .nav{
    width:100%;
    padding:4.9rem 1rem 1.5rem;
  }

  .hero-buttons,
  .referral-actions,
  .money-actions,
  .coming-actions{
    width:100%;
  }

  .hero-buttons .btn-primary,
  .hero-buttons .btn-secondary,
  .referral-actions .btn-primary,
  .referral-actions .btn-secondary,
  .money-actions .btn-primary,
  .money-actions .btn-secondary,
  .coming-actions .btn-primary,
  .coming-actions .btn-secondary,
  .mega-cta-btn{
    width:100%;
    justify-content:center;
    min-height:46px;
  }

  .stats-row{
    width:100%;
    display:grid !important;
    grid-template-columns:repeat(3,1fr);
    gap:.65rem !important;
  }

  .stat-num{
    font-size:1.45rem !important;
  }

  .stat-label{
    font-size:.62rem !important;
    line-height:1.25;
  }

  .search-bar input{
    min-height:52px;
    font-size:1rem;
    border-radius:14px;
  }

  .category-header,
  .category-header-boxing{
    padding:1rem !important;
    gap:.85rem !important;
  }

  .boutique-trigger{
    padding:1rem !important;
    align-items:flex-start;
  }

  .boutique-icon{
    font-size:2rem !important;
    min-width:auto !important;
  }
}

