:root{
  --premium-ink:#07160d;
  --premium-green:#126b37;
  --premium-mint:#dffbea;
  --premium-blue:#dff4ff;
  --premium-violet:#f1e9ff;
  --premium-peach:#fff0dd;
  --premium-glass:rgba(255,255,255,.72);
  --premium-line:rgba(18,107,55,.13);
  --premium-shadow:0 28px 90px rgba(5,48,27,.14);
  --premium-soft-shadow:0 18px 55px rgba(5,48,27,.1);
}

html.premium-ready{scroll-padding-top:86px}
body{background:
  radial-gradient(circle at 12% 6%,rgba(223,244,255,.65),transparent 23rem),
  radial-gradient(circle at 92% 12%,rgba(223,251,234,.9),transparent 26rem),
  radial-gradient(circle at 68% 52%,rgba(255,240,221,.42),transparent 22rem),
  #fff}

body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
  background-image:
    linear-gradient(rgba(18,107,55,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(18,107,55,.035) 1px,transparent 1px);
  background-size:42px 42px;
  mask-image:linear-gradient(180deg,rgba(0,0,0,.7),transparent 72%);
}

nav{
  background:rgba(255,255,255,.78)!important;
  border-bottom:1px solid rgba(18,107,55,.1)!important;
  box-shadow:0 16px 44px rgba(5,48,27,.05);
}

.btn-primary,.btn-nav,.price-cta,.dash-btn,.phone-action{
  background:linear-gradient(135deg,#126b37,#0a8f48)!important;
  box-shadow:0 14px 34px rgba(18,107,55,.2);
}

.btn-primary:hover,.btn-nav:hover,.price-cta:hover,.dash-btn:hover{
  transform:translateY(-3px);
  box-shadow:0 20px 48px rgba(18,107,55,.28);
}

.btn-secondary,.price-cta-ghost{
  background:rgba(255,255,255,.68)!important;
  border-color:rgba(18,107,55,.2)!important;
  box-shadow:0 12px 32px rgba(5,48,27,.06);
  backdrop-filter:blur(14px);
}

.hero,.section-alt{
  background:
    radial-gradient(circle at 82% 12%,rgba(223,251,234,.95),transparent 25rem),
    radial-gradient(circle at 18% 78%,rgba(223,244,255,.52),transparent 20rem),
    linear-gradient(135deg,#f7fff9,#f5fbff 58%,#fff8ef)!important;
}

.hero::before,.hero-blob1{
  background:linear-gradient(135deg,rgba(219,255,232,.9),rgba(224,245,255,.74))!important;
  filter:blur(1px);
}

.hero::after,.hero-blob2{
  background:linear-gradient(135deg,rgba(255,238,210,.45),rgba(239,229,255,.5))!important;
}

.hero-content,.hero-copy{animation:premium-rise .7s cubic-bezier(.2,.8,.2,1) both}
.hero-visual,.hero-panel{animation:premium-float-in .85s cubic-bezier(.2,.8,.2,1) .08s both}

.hero-title,.hero h1,.s-title,.section-title,.cta h2{
  letter-spacing:0;
  text-wrap:balance;
}

.hero-title span,.hero h1 span,.s-title span,.section-title span{
  background:linear-gradient(110deg,#126b37,#14a15a 55%,#0c5e45);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent!important;
}

.hero-badge,.tag,.price-badge,.price-target,.live,.badge,.mock-pill{
  border:1px solid rgba(18,107,55,.13)!important;
  background:rgba(220,252,231,.72)!important;
  backdrop-filter:blur(16px);
}

.dash-wrap,.hero-panel,.card,.app-card,.price-card,.testimonial-card,.faq-item,.actor-card,.illustration-board,.mock-panel,.mini-phone,.vs-table,.platform-card,.works-access-card,.onboarding-showcase-card{
  border:1px solid rgba(18,107,55,.13)!important;
  background:linear-gradient(145deg,rgba(255,255,255,.82),rgba(247,255,250,.6))!important;
  box-shadow:var(--premium-soft-shadow)!important;
  backdrop-filter:blur(18px);
}

.dash-wrap,.hero-panel,.illustration-board,.works-access-card,.onboarding-showcase-card{
  box-shadow:var(--premium-shadow)!important;
}

.dash-wrap,.hero-panel,.illustration-board,.price-card,.app-card,.platform-card,.works-access-card,.onboarding-showcase-card{
  border-radius:28px!important;
}

.dash-top,.panel-top{
  background:linear-gradient(135deg,#126b37,#0a7a41 68%,#0c5849)!important;
}

.dash-wrap,.hero-panel,.app-card,.price-card,.card,.actor-card,.platform-card,.illustration-board,.works-access-card,.onboarding-showcase-card{
  transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease;
}

.dash-wrap:hover,.hero-panel:hover,.app-card:hover,.price-card:hover,.card:hover,.actor-card:hover,.platform-card:hover,.works-access-card:hover,.onboarding-showcase-card:hover{
  transform:translateY(-6px);
  border-color:rgba(18,107,55,.25)!important;
  box-shadow:0 30px 80px rgba(5,48,27,.16)!important;
}

.dash-kpis .dk,.kpi,.mock-stat,.impact-card{
  background:linear-gradient(145deg,rgba(255,255,255,.88),rgba(235,252,242,.74))!important;
  border:1px solid rgba(18,107,55,.13)!important;
  box-shadow:0 12px 28px rgba(5,48,27,.06);
}

.chart-area,.rows,.work-item,.phone-line{
  background:rgba(255,255,255,.72)!important;
  border:1px solid rgba(18,107,55,.1)!important;
  backdrop-filter:blur(12px);
}

.phone-float,.mini-phone{
  animation:premium-breathe 5s ease-in-out infinite;
}

.chart-area svg polyline:nth-of-type(2){
  stroke-dasharray:620;
  stroke-dashoffset:620;
  animation:premium-draw 2.2s ease forwards .45s;
}

.reveal,.premium-reveal{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .55s ease,transform .55s ease;
}

.reveal.visible,.premium-reveal.visible{
  opacity:1;
  transform:none;
}

.premium-flow{
  position:relative;
  isolation:isolate;
  background:
    radial-gradient(circle at 20% 20%,rgba(223,244,255,.75),transparent 20rem),
    radial-gradient(circle at 88% 70%,rgba(255,240,221,.55),transparent 18rem),
    #fff;
}

.flow-panel{
  max-width:1180px;
  margin:0 auto;
  display:grid;
  grid-template-columns:.82fr 1.18fr;
  gap:28px;
  align-items:stretch;
}

.flow-copy{
  padding:34px;
  border-radius:28px;
  border:1px solid var(--premium-line);
  background:linear-gradient(145deg,rgba(255,255,255,.78),rgba(245,255,250,.58));
  box-shadow:var(--premium-soft-shadow);
  backdrop-filter:blur(18px);
}

.flow-copy h2{
  font-family:'Playfair Display',serif;
  font-size:clamp(30px,3.4vw,48px);
  line-height:1.08;
  margin:10px 0 14px;
}

.flow-copy h2 span{color:var(--premium-green)}
.flow-copy p{color:var(--muted);line-height:1.7;font-size:16px}

.flow-rail{
  position:relative;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
  padding:24px;
  border-radius:32px;
  border:1px solid var(--premium-line);
  background:rgba(255,255,255,.64);
  box-shadow:var(--premium-shadow);
  backdrop-filter:blur(20px);
  overflow:hidden;
}

.flow-rail::before{
  content:"";
  position:absolute;
  left:8%;
  right:8%;
  top:55px;
  height:3px;
  border-radius:999px;
  background:linear-gradient(90deg,#126b37,#2bdc7b,#9ee8ff,#ffc46b);
  opacity:.75;
}

.flow-step{
  position:relative;
  z-index:1;
  min-height:210px;
  padding:18px;
  border-radius:24px;
  background:linear-gradient(155deg,rgba(255,255,255,.9),rgba(240,253,244,.65));
  border:1px solid rgba(18,107,55,.12);
  box-shadow:0 16px 38px rgba(5,48,27,.08);
}

.flow-dot{
  width:58px;
  height:58px;
  display:grid;
  place-items:center;
  border-radius:20px;
  color:#fff;
  font-weight:900;
  margin-bottom:46px;
  background:linear-gradient(135deg,#126b37,#2bdc7b);
  box-shadow:0 16px 34px rgba(18,107,55,.23);
}

.flow-step:nth-child(3) .flow-dot{background:linear-gradient(135deg,#0d766c,#90e0ff)}
.flow-step:nth-child(4) .flow-dot{background:linear-gradient(135deg,#7c5cff,#cfb7ff)}
.flow-step:nth-child(5) .flow-dot{background:linear-gradient(135deg,#f59e0b,#ffd38a)}
.flow-step strong{display:block;font-size:17px;margin-bottom:8px;color:var(--premium-ink)}
.flow-step span{display:block;color:var(--muted);font-size:13px;line-height:1.55}

.product-workflow{
  background:
    radial-gradient(circle at 18% 18%,rgba(223,244,255,.75),transparent 22rem),
    radial-gradient(circle at 85% 80%,rgba(255,240,221,.48),transparent 19rem),
    #fff;
}

.product-workflow-grid{
  max-width:1180px;
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
}

.product-workflow-card{
  position:relative;
  overflow:hidden;
  min-height:188px;
  padding:22px;
  border-radius:26px;
  border:1px solid rgba(18,107,55,.12);
  background:linear-gradient(145deg,rgba(255,255,255,.86),rgba(242,255,247,.64));
  box-shadow:var(--premium-soft-shadow);
  backdrop-filter:blur(16px);
}

.product-workflow-card::after{
  content:"";
  position:absolute;
  width:110px;
  height:110px;
  right:-34px;
  top:-34px;
  border-radius:42px;
  background:linear-gradient(135deg,rgba(43,220,123,.2),rgba(158,232,255,.32));
  transform:rotate(18deg);
}

.product-workflow-card b{
  position:relative;
  z-index:1;
  display:inline-grid;
  place-items:center;
  width:42px;
  height:42px;
  border-radius:16px;
  color:#fff;
  background:linear-gradient(135deg,#126b37,#2bdc7b);
  margin-bottom:24px;
}

.product-workflow-card strong{display:block;font-size:18px;margin-bottom:8px}
.product-workflow-card span{display:block;color:var(--muted);font-size:13px;line-height:1.6}

.map,.map-abstract{
  background:
    radial-gradient(circle at 28% 18%,rgba(107,225,255,.22),transparent 16%),
    radial-gradient(circle at 76% 72%,rgba(255,196,107,.16),transparent 18%),
    linear-gradient(135deg,#fbfdff,#f4f9fb 46%,#eff9f3)!important;
}

.map-route::before{content:"Staffika"!important}
.map-route::after{content:"Site actif · passage validé"!important}

.map-label,.map-chip{
  background:rgba(255,255,255,.88)!important;
  color:#425466!important;
  border-color:rgba(66,84,102,.1)!important;
}

.pin{animation:premium-pin 2.2s ease-in-out infinite}
.pin:nth-of-type(2){animation-delay:.25s}
.pin:nth-of-type(3){animation-delay:.5s}

.price-card{overflow:hidden}
.price-card::before{
  content:"";
  position:absolute;
  inset:0 0 auto;
  height:5px;
  background:linear-gradient(90deg,#126b37,#2bdc7b,#9ee8ff,#ffc46b);
  opacity:.8;
}

.pricing-grid,.pricing-grid-four{align-items:stretch}
.price-devis{font-size:clamp(24px,2.4vw,34px)!important;line-height:1.05;overflow-wrap:anywhere}

@keyframes premium-rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes premium-float-in{from{opacity:0;transform:translateY(28px) scale(.98)}to{opacity:1;transform:none}}
@keyframes premium-breathe{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes premium-draw{to{stroke-dashoffset:0}}
@keyframes premium-pin{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .reveal,.premium-reveal{opacity:1!important;transform:none!important}
}

@media(max-width:980px){
  .flow-panel{grid-template-columns:1fr}
  .flow-rail,.product-workflow-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .flow-rail::before{display:none}
}

@media(max-width:620px){
  .hero,.section{padding-left:5%!important;padding-right:5%!important}
  .flow-copy{padding:24px}
  .flow-rail,.product-workflow-grid{grid-template-columns:1fr}
  .flow-step{min-height:auto}
  .flow-dot{margin-bottom:24px}
  .dash-wrap,.hero-panel,.illustration-board,.price-card,.app-card,.platform-card,.works-access-card,.onboarding-showcase-card{border-radius:20px!important}
  .price-card{width:100%;min-width:0}
  .pricing-grid,.pricing-grid-four{grid-template-columns:minmax(0,1fr)!important}
  .price-features,.price-feature{min-width:0}
  .hero-title,.hero h1{font-size:clamp(30px,10vw,42px)!important}
  .product-page .hero h1{
    width:min(330px, calc(100vw - 48px))!important;
    max-width:min(330px, calc(100vw - 48px))!important;
    font-size:clamp(27px,7.6vw,30px)!important;
    line-height:1.12!important;
    overflow-wrap:anywhere;
    word-break:break-word;
  }
  .product-page .hero-copy,
  .product-page .hero-panel{
    width:min(342px, calc(100vw - 48px))!important;
    max-width:min(342px, calc(100vw - 48px))!important;
    min-width:0!important;
  }
  .product-page .hero p{
    width:min(330px, calc(100vw - 48px))!important;
    max-width:min(330px, calc(100vw - 48px))!important;
    font-size:15px!important;
    overflow-wrap:anywhere;
    word-break:break-word;
  }
  .product-page .hero,
  .product-page section,
  .product-page nav,
  .product-page footer{
    width:100%!important;
    max-width:100vw!important;
    overflow-x:hidden!important;
  }
  .product-page .hero *{
    max-width:100%;
  }
  .product-page .nav-links{
    max-width:100%;
  }
  .product-page .live{
    font-size:9px!important;
    padding:5px 7px!important;
    letter-spacing:0!important;
    color:#126b37!important;
  }
  .product-page .map-label,
  .product-page .map-chip{
    font-size:9px!important;
    max-width:120px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
}