/*
 * Dorana Diffusion - index.css
 * Styles spécifiques à index.html.
 */

/* ============================================================
   HERO
   ============================================================ */

.hero {
  min-height:    calc(100svh - 74px);
  padding:       clamp(48px, 7vw, 100px) 0 clamp(48px, 6vw, 80px);
  position:      relative;
  overflow:      hidden;
  display:       flex;
  flex-direction: column;
  justify-content: center;
  background:
    radial-gradient(62% 58% at 88% 8%,  rgba(200, 143, 196, .38) 0%, rgba(200, 143, 196, 0) 60%),
    radial-gradient(48% 52% at  8% 82%, rgba(122, 58, 118, .2)  0%, rgba(122, 58, 118, 0) 60%),
    radial-gradient(35% 40% at 50% 50%, rgba(184, 155, 107, .06) 0%, transparent 70%),
    linear-gradient(180deg, var(--cream) 0%, #F4EBE0 100%);
}

.hero::before {
  content:          "";
  position:         absolute;
  inset:            0;
  pointer-events:   none;
  background-image:
    repeating-linear-gradient(to right, transparent 0 calc(100%/12 - 1px), rgba(20, 16, 26, .035) calc(100%/12 - 1px) calc(100%/12));
  mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 75%, transparent 100%);
}

.hero .container { flex: 1; display: flex; flex-direction: column; justify-content: center; }

.hero .grid {
  display:               grid;
  grid-template-columns: 1.1fr 1fr;
  gap:                   clamp(36px, 5vw, 80px);
  align-items:           center;
}

@media (max-width: 960px) {
  .hero .grid { grid-template-columns: 1fr; }
}

/* Hero — animations d'entrée */
@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hero-anim {
  opacity:   0;
  animation: heroFadeUp .8s var(--ease-out) forwards;
}

.hero-anim[data-anim-order="1"] { animation-delay: .05s; }
.hero-anim[data-anim-order="2"] { animation-delay: .2s;  }
.hero-anim[data-anim-order="3"] { animation-delay: .38s; }
.hero-anim[data-anim-order="4"] { animation-delay: .52s; }
.hero-anim[data-anim-order="5"] { animation-delay: .66s; }

/* Hero — colonne texte */
.hero__content { display: flex; flex-direction: column; }

.hero h1 { margin-top: 28px; }

.hero h1 .soft {
  color:       var(--mauve-700);
  font-style:  italic;
  font-weight: 400;
}

.hero h1 .strike { position: relative; display: inline-block; }

.hero h1 .strike::after {
  content:       "";
  position:      absolute;
  left:          -4px;
  right:         -4px;
  bottom:        .12em;
  height:        .15em;
  background:    var(--mauve-300);
  border-radius: 3px;
  z-index:       -1;
  opacity:       .65;
}

.hero-sub {
  margin-top: 28px;
  max-width:  54ch;
  color:      var(--ink-2);
  font-size:  clamp(15px, 1.15vw, 17px);
  line-height: 1.7;
}

.hero-actions {
  display:   flex;
  gap:       12px;
  margin-top: 36px;
  flex-wrap: wrap;
}

.hero-meta {
  margin-top:  52px;
  display:     flex;
  gap:         36px;
  flex-wrap:   wrap;
  border-top:  1px solid var(--line);
  padding-top: 24px;
}

.hero-meta div b {
  display:              block;
  font-family:          var(--f-display);
  font-size:            clamp(32px, 3.5vw, 44px);
  font-weight:          500;
  line-height:          1;
  color:                var(--ink);
  font-variant-numeric: tabular-nums;
}

.hero-meta div span {
  display:        block;
  font-size:      11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color:          var(--muted);
  margin-top:     8px;
}

/* Hero — colonne visuelle */
.hero__visual-col { position: relative; }

.hero-visual {
  position:      relative;
  aspect-ratio:  4/5;
  border-radius: 10px;
  overflow:      hidden;
  transition:    box-shadow .4s ease;
}

.hero-visual:hover { box-shadow:    0 40px 80px -30px rgba(59, 26, 56, .5), 0 0 0 1px rgba(20, 16, 26, .06); }

.hero-visual__bg {
  position:   absolute;
  inset:      0;
  background: radial-gradient(130% 90% at 25% 5%, #C88FC4 0%, #7A3A76 40%, #3B1A38 100%);
}

.hero-visual__catalogue {
  height: 100%;
}

.hero-catalogue-img {
  position: relative;
    border-radius: 4px;
    margin: auto;
    top: 50%;
    transform: translateY(-50%);
    width:100%
}

.hero-visual__shine {
  position:   absolute;
  inset:      0;
  background: linear-gradient(125deg, rgba(255, 255, 255, .12) 0%, transparent 50%, rgba(255, 255, 255, .04) 100%);
  pointer-events: none;
}

.hero-visual .placeholder {
  position:         absolute;
  inset:            0;
  background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, .05) 0 2px, transparent 2px 14px);
  mix-blend-mode:   overlay;
}

.hero-visual .tag {
  position:       absolute;
  left:           18px;
  top:            18px;
  font-family:    "SFMono-Regular", ui-monospace, Menlo, monospace;
  font-size:      10px;
  letter-spacing: .12em;
  color:          rgba(255, 255, 255, .7);
  background:     rgba(0, 0, 0, .28);
  padding:        6px 12px;
  border-radius:  999px;
  backdrop-filter: blur(6px);
}

.hv-caption {
  position:        absolute;
  left:            22px;
  right:           22px;
  bottom:          22px;
  color:           #fff;
  display:         flex;
  justify-content: space-between;
  align-items:     flex-end;
  gap:             12px;
}

.hv-caption h4 {
  color:       #fff;
  font-size:   28px;
  line-height: 1.1;
  max-width:   16ch;
  font-style:  italic;
}

.hv-caption small {
  font-size:      11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  opacity:        .75;
}

.hero-badge {
  position:      absolute;
  left:          -22px;
  bottom:        44px;
  background:    var(--cream);
  border:        1px solid var(--line);
  padding:       12px 18px;
  border-radius: 999px;
  font-size:     13px;
  font-weight:   500;
  display:       flex;
  align-items:   center;
  gap:           10px;
  box-shadow:    0 12px 32px -16px rgba(20, 16, 26, .4);
  transition:    box-shadow .25s, transform .25s var(--ease-out);
}

.hero-badge--cta:hover {
  box-shadow: 0 16px 40px -12px rgba(122, 58, 118, .35);
  transform:  translateY(-2px);
}

.hero-badge .dot {
  width:        8px;
  height:       8px;
  border-radius: 50%;
  background:   #2FB56A;
  box-shadow:   0 0 0 4px rgba(47, 181, 106, .2);
  flex-shrink:  0;
}

.badge-arrow {
  font-size:   12px;
  color:       var(--mauve-700);
  margin-left: 4px;
}

/* Watermark décoratif */
.hero-watermark {
  position:       absolute;
  right:          -5vw;
  top:            -1vw;
  pointer-events: none;
  font-family:    var(--f-display);
  font-style:     italic;
  font-size:      clamp(160px, 26vw, 400px);
  color:          var(--mauve-100);
  line-height:    .8;
  letter-spacing: -0.04em;
  z-index:        -1;
  opacity:        .6;
  user-select:    none;
}

/* Indicateur de défilement */
.hero-scroll-hint {
  position:        absolute;
  bottom:          28px;
  left:            50%;
  transform:       translateX(-50%);
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  opacity:         .5;
}

.scroll-mouse {
  width:         22px;
  height:        34px;
  border-radius: 999px;
  border:        1.5px solid var(--muted);
  display:       flex;
  justify-content: center;
  padding-top:   6px;
}

.scroll-mouse__dot {
  width:         4px;
  height:        7px;
  border-radius: 999px;
  background:    var(--muted);
  animation:     scrollBounce 1.8s ease-in-out infinite;
}

@keyframes scrollBounce {
  0%, 100% { transform: translateY(0); opacity: 1; }
  60%       { transform: translateY(8px); opacity: .3; }
}


/* ============================================================
   BRANDS MARQUEE
   ============================================================ */

.brands {
  border-block: 1px solid var(--line);
  padding:      22px 0;
  background:   var(--cream-2);
  overflow:     hidden;
}

.brands-inner {
  display:    flex;
  gap:        64px;
  align-items: center;
  animation:  slide 40s linear infinite;
  width:      max-content;
}

.brands span {
  font-family:    var(--f-display);
  font-style:     italic;
  font-size:      26px;
  color:          var(--ink-2);
  white-space:    nowrap;
  letter-spacing: .01em;
}

.brands span::after {
  content:     "·";
  margin-left: 64px;
  color:       var(--ink-2);
}

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



/* ============================================================
   CATALOGUE SECTION
   ============================================================ */

.catalogue {
  background:
    radial-gradient(60% 60% at 10% 50%, rgba(122, 58, 118, .22) 0%, transparent 60%),
    radial-gradient(50% 55% at 95% 50%, rgba(184, 155, 107, .1)  0%, transparent 55%),
    linear-gradient(150deg, #1E0F22 0%, #0F0B14 55%, #14101A 100%);
  color:    var(--cream);
  overflow: hidden;
}

.catalogue-bg-deco {
  position:          absolute;
  inset:             0;
  pointer-events:    none;
  background-image:  repeating-linear-gradient(to right, transparent 0 calc(100%/12 - 1px), rgba(255, 255, 255, .025) calc(100%/12 - 1px) calc(100%/12));
  mask-image:        linear-gradient(to bottom, transparent, black 20%, black 80%, transparent);
}

.catalogue-grid {
  display:               grid;
  grid-template-columns: 1fr 1.1fr;
  gap:                   clamp(48px, 7vw, 100px);
  align-items:           center;
}

@media (max-width: 900px) {
  .catalogue-grid { grid-template-columns: 1fr; }
}

/* Visuel 3D */
.catalogue-visual {
  display:         flex;
  align-items:     center;
  justify-content: center;
  position:        relative;
  padding:         48px;
}

.catalogue-3d {
  position:    relative;
  display:     inline-flex;
  align-items: center;
}

.catalogue-3d__book {
  position:   relative;
  display:    inline-block;
  transform:  perspective(1400px) rotateY(-20deg) rotateX(4deg);
  transition: transform .7s var(--ease-out), filter .5s ease;
  filter:     drop-shadow(28px 36px 56px rgba(59, 26, 56, .85));
}

.catalogue-3d:hover .catalogue-3d__book {
  transform: perspective(1400px) rotateY(-6deg) rotateX(2deg) scale(1.025);
  filter:    drop-shadow(20px 28px 64px rgba(122, 58, 118, .7));
}

.catalogue-3d__cover {
  display:       block;
  border-radius: 3px 8px 8px 3px;
  overflow:      hidden;
  max-width:     clamp(200px, 22vw, 300px);
}

.catalogue-3d__cover img {
  display: block;
  width:   100%;
  height:  auto;
}

.catalogue-3d__spine {
  position:      absolute;
  left:          0;
  top:           0;
  bottom:        0;
  width:         20px;
  background:    linear-gradient(to right, rgba(0, 0, 0, .55), rgba(0, 0, 0, .1) 60%, transparent);
  border-radius: 3px 0 0 3px;
}

.catalogue-3d__pages {
  position:      absolute;
  right:         -10px;
  top:           2px;
  bottom:        2px;
  width:         16px;
  background:    repeating-linear-gradient(to bottom, #EEE6DE 0 1.5px, #DDD5CC 1.5px 3px);
  border-radius: 0 2px 2px 0;
  transform:     perspective(600px) rotateY(12deg);
}

.catalogue-3d__shadow {
  position:     absolute;
  left:         10%;
  right:        -5%;
  bottom:       -32px;
  height:       40px;
  background:   radial-gradient(ellipse at center, rgba(59, 26, 56, .7) 0%, transparent 70%);
  filter:       blur(12px);
  transform:    scaleY(.4);
  pointer-events: none;
}

/* Lueur derrière le livre */
.catalogue-glow {
  position:   absolute;
  inset:      -40px;
  background: radial-gradient(ellipse at center, rgba(162, 74, 160, .3) 0%, transparent 65%);
  filter:     blur(32px);
  z-index:    -1;
  pointer-events: none;
}

/* Badge PDF */
.catalogue-format-badge {
  position:        absolute;
  bottom:          24px;
  left:            24px;
  background:      rgba(255, 255, 255, .08);
  border:          1px solid rgba(255, 255, 255, .15);
  backdrop-filter: blur(12px);
  padding:         10px 16px;
  border-radius:   999px;
  display:         flex;
  align-items:     center;
  gap:             8px;
}

.format-badge__ext {
  font-family:    var(--f-sans);
  font-size:      10px;
  font-weight:    700;
  letter-spacing: .15em;
  color:          var(--mauve-300);
  text-transform: uppercase;
  background:     rgba(200, 143, 196, .15);
  padding:        3px 7px;
  border-radius:  4px;
}

.format-badge__label {
  font-size:   13px;
  font-weight: 600;
  color:       rgba(250, 246, 241, .85);
}

/* Contenu catalogue */
.catalogue-content { padding: clamp(32px, 4vw, 56px) 0; }

.catalogue-eyebrow { color: var(--mauve-300); }
.catalogue-eyebrow::before { background: var(--mauve-300); }

.catalogue-content h2 {
  color:      var(--cream);
  margin-top: 18px;
}

.catalogue-content h2 .italic { color: var(--mauve-300); }

.catalogue-content > p {
  color:      rgba(250, 246, 241, .75);
  font-size:  16px;
  max-width:  48ch;
  margin-top: 22px;
  line-height: 1.7;
}

.catalogue-highlights {
  list-style: none;
  padding:    0;
  margin:     28px 0 0;
  display:    grid;
  gap:        14px;
}

.catalogue-highlights li {
  display:     flex;
  gap:         14px;
  align-items: flex-start;
  font-size:   15px;
  color:       rgba(250, 246, 241, .85);
  line-height: 1.5;
}

.ch-ico {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           22px;
  height:          22px;
  border-radius:   50%;
  background:      rgba(200, 143, 196, .15);
  color:           var(--mauve-300);
  font-size:       12px;
  font-weight:     700;
  flex-shrink:     0;
  margin-top:      1px;
}

.catalogue-stats {
  display:     flex;
  gap:         32px;
  margin-top:  32px;
  padding-top: 24px;
  border-top:  1px solid rgba(255, 255, 255, .1);
  flex-wrap:   wrap;
}

.catalogue-stats div b {
  display:              block;
  font-family:          var(--f-display);
  font-size:            clamp(32px, 3.5vw, 44px);
  font-weight:          500;
  line-height:          1;
  color:                var(--cream);
  font-variant-numeric: tabular-nums;
}

.catalogue-stats div span {
  display:        block;
  font-size:      11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color:          rgba(250, 246, 241, .5);
  margin-top:     8px;
}

.catalogue-actions {
  display:    flex;
  gap:        14px;
  margin-top: 36px;
  flex-wrap:  wrap;
  align-items: center;
}


/* ============================================================
   ABOUT
   ============================================================ */

.about {
  background:
    radial-gradient(40% 50% at 100% 0%, rgba(200, 143, 196, .18) 0%, transparent 60%),
    radial-gradient(50% 60% at 0% 100%, rgba(184, 155, 107, .12) 0%, transparent 60%),
    var(--cream);
  position: relative;
}

.about::before {
  content:        "";
  position:       absolute;
  left:           50%;
  top:            0;
  bottom:         0;
  width:          1px;
  background:     linear-gradient(to bottom, transparent, rgba(20, 16, 26, .08) 20%, rgba(20, 16, 26, .08) 80%, transparent);
  pointer-events: none;
}

@media (max-width: 900px) {
  .about::before { display: none; }
}

.about .grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   clamp(32px, 5vw, 80px);
  align-items:           center;
  position:              relative;
}

@media (max-width: 900px) {
  .about .grid { grid-template-columns: 1fr; }
}

.about-visual {
  position:      relative;
  aspect-ratio:  5/6;
}

.about-visual .frame {
  position:       absolute;
  inset:          24px;
  border:         1px solid rgba(20, 16, 26, .15);
  display:        flex;
  align-items:    flex-end;
  padding:        20px;
  font-family:    "SFMono-Regular", ui-monospace, Menlo, monospace;
  font-size:      11px;
  letter-spacing: .08em;
  color:          var(--muted);
  text-transform: uppercase;
}

.about-visual .placeholder {
  position:         absolute;
  inset:            0;
  background-image: repeating-linear-gradient(135deg, rgba(122, 58, 118, .08) 0 2px, transparent 2px 16px);
}

.about-visual .seal {
  position:        absolute;
  top:             50px;
  right:           24px;
  width:           120px;
  height:          120px;
  border-radius:   50%;
  background:      var(--ink);
  color:           var(--cream);
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  font-family:     var(--f-display);
  font-style:      italic;
  font-size:       18px;
  text-align:      center;
  line-height:     1.1;
  box-shadow:      0 20px 40px -20px rgba(0, 0, 0, .4);
}

.seal small {
  font-family:    var(--f-sans);
  font-style:     normal;
  font-size:      10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color:          var(--mauve-300);
  margin-bottom:  6px;
}

.about__heading { max-width: 22ch; }

.about__body {
  margin-top: 20px;
  color:      var(--ink-2);
  font-size:  16px;
  max-width:  52ch;
  line-height: 1.7;
}

.about-points {
  margin-top: 36px;
  display:    grid;
  gap:        16px;
  padding:    0;
}

.about-points li {
  list-style:   none;
  padding-left: 26px;
  position:     relative;
  font-size:    15px;
  color:        var(--ink-2);
  line-height:  1.6;
}

.about-points li::before {
  content:    "";
  position:   absolute;
  left:       0;
  top:        .7em;
  width:      14px;
  height:     1px;
  background: var(--mauve-700);
  transition: width .25s var(--ease-out);
}

.about-points li:hover::before { width: 20px; }

.about-sign {
  margin-top:  40px;
  padding-top: 28px;
  border-top:  1px solid var(--line);
  display:     flex;
  align-items: center;
  gap:         16px;
}

.about-sign .avatar {
  width:           52px;
  height:          52px;
  border-radius:   50%;
  background:      linear-gradient(135deg, var(--mauve-500), var(--mauve-800));
  display:         flex;
  align-items:     center;
  justify-content: center;
  color:           #fff;
  font-family:     var(--f-display);
  font-style:      italic;
  font-size:       22px;
  flex-shrink:     0;
}

.about-sign b { display: block; font-weight: 600; font-size: 14px; }
.about-sign span { display: block; font-size: 13px; color: var(--muted); }


/* ============================================================
   SERVICES
   ============================================================ */

.services {
  background:
    radial-gradient(60% 50% at 20% 0%,   rgba(162, 74, 160, .22) 0%, transparent 55%),
    radial-gradient(55% 55% at 100% 100%, rgba(122, 58, 118, .28) 0%, transparent 55%),
    linear-gradient(180deg, #0E0A14 0%, var(--ink) 100%);
  color:    var(--cream);
  position: relative;
}

.services::before {
  content:          "";
  position:         absolute;
  inset:            0;
  pointer-events:   none;
  background-image: repeating-linear-gradient(to right, transparent 0 calc(100%/12 - 1px), rgba(255, 255, 255, .03) calc(100%/12 - 1px) calc(100%/12));
  mask-image:       linear-gradient(to bottom, transparent, black 20%, black 80%, transparent);
}

.services h2, .services h3 { color: var(--cream); }

.services .eyebrow            { color:      var(--mauve-300); }
.services .eyebrow::before    { background: var(--mauve-300); }
.services .section-head p.lede { color:     rgba(250, 246, 241, .75); }

.service-grid {
  display:               grid;
  grid-template-columns: repeat(12, 1fr);
  gap:                   1px;
  background:            rgba(255, 255, 255, .07);
  border:                1px solid rgba(255, 255, 255, .07);
  border-radius:         4px;
  overflow:              hidden;
}

.service {
  grid-column:     span 6;
  background:      var(--ink);
  padding:         40px;
  position:        relative;
  min-height:      340px;
  display:         flex;
  flex-direction:  column;
  justify-content: space-between;
  transition:      background .35s ease, box-shadow .35s ease;
}

.service::after {
  content:    "";
  position:   absolute;
  inset:      0;
  background: linear-gradient(135deg, rgba(200, 143, 196, .08) 0%, transparent 50%);
  opacity:    0;
  transition: opacity .35s ease;
  pointer-events: none;
}

.service:hover { background: #1C1226; }
.service:hover::after { opacity: 1; }

.service .num {
  font-family:          var(--f-display);
  font-style:           italic;
  font-size:            20px;
  color:                var(--mauve-300);
  font-variant-numeric: tabular-nums;
}

.service h3 { margin-top: 20px; max-width: 14ch; }

.service p {
  color:      rgba(250, 246, 241, .7);
  font-size:  15px;
  max-width:  40ch;
  margin-top: 14px;
  line-height: 1.6;
}

.service ul {
  margin-top: 22px;
  padding:    0;
  list-style: none;
  display:    flex;
  gap:        16px;
  flex-wrap:  wrap;
}

.service ul li {
  font-size:      12px;
  letter-spacing: .06em;
  color:          rgba(250, 246, 241, .55);
  padding-left:   14px;
  position:       relative;
}

.service ul li::before {
  content:       "";
  position:      absolute;
  left:          0;
  top:           .6em;
  width:         6px;
  height:        6px;
  border-radius: 50%;
  background:    var(--mauve-500);
}

.service .service-arrow {
  position:        absolute;
  top:             38px;
  right:           38px;
  width:           40px;
  height:          40px;
  border-radius:   50%;
  border:          1px solid rgba(255, 255, 255, .2);
  display:         flex;
  align-items:     center;
  justify-content: center;
  transition:      all .35s var(--ease-out);
}

.service:hover .service-arrow {
  background:   var(--mauve-500);
  border-color: var(--mauve-500);
  transform:    rotate(-45deg);
  box-shadow:   0 8px 24px -8px rgba(162, 74, 160, .7);
}

@media (max-width: 900px) {
  .service { grid-column: span 12; min-height: auto; padding: 32px 24px; }
}

.benefits {
  margin-top:            80px;
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  gap:                   24px;
  padding-top:           48px;
  border-top:            1px solid rgba(255, 255, 255, .1);
}

@media (max-width: 900px) {
  .benefits { grid-template-columns: repeat(2, 1fr); }
}

.benefit b {
  display:              block;
  font-family:          var(--f-display);
  font-size:            clamp(28px, 3vw, 38px);
  font-weight:          500;
  color:                var(--cream);
  font-variant-numeric: tabular-nums;
}

.benefit span { display: block; font-size: 13px; color: rgba(250, 246, 241, .6); margin-top: 8px; }


/* ============================================================
   PROOF
   ============================================================ */

.proof {
  background:
    radial-gradient(45% 45% at 100% 0%, rgba(200, 143, 196, .28) 0%, transparent 60%),
    radial-gradient(50% 50% at 0% 100%, rgba(184, 155, 107, .18) 0%, transparent 60%),
    linear-gradient(180deg, var(--cream-2) 0%, #EDE3D5 100%);
  position: relative;
}

.proof::after {
  content:        "\201D";
  position:       absolute;
  right:          3vw;
  top:            8%;
  font-family:    var(--f-display);
  font-style:     italic;
  font-size:      clamp(180px, 20vw, 360px);
  color:          rgba(122, 58, 118, .07);
  line-height:    .7;
  pointer-events: none;
}

.proof-grid {
  display:               grid;
  grid-template-columns: 1.2fr 1fr;
  gap:                   clamp(24px, 4vw, 56px);
}

@media (max-width: 900px) {
  .proof-grid { grid-template-columns: 1fr; }
}

.testimonial {
  background:    var(--cream);
  border:        1px solid var(--line);
  padding:       clamp(28px, 3vw, 44px);
  border-radius: 6px;
  position:      relative;
  transition:    box-shadow .35s ease, transform .35s var(--ease-out);
}

.testimonial:hover {
  box-shadow: 0 16px 48px -20px rgba(122, 58, 118, .25);
  transform:  translateY(-3px);
}

.testimonial .quote {
  font-family:  var(--f-display);
  font-size:    clamp(20px, 2vw, 28px);
  line-height:  1.4;
  color:        var(--ink);
  font-style:   italic;
  padding-left: 40px;
}

.testimonial .quote::before {
  content:     "\201C";
  font-size:   96px;
  line-height: 0;
  color:       var(--mauve-300);
  position:    absolute;
  left:        18px;
  top:         50px;
  font-family: var(--f-display);
  opacity:     .6;
}

.testimonial .author {
  display:     flex;
  align-items: center;
  gap:         14px;
  margin-top:  32px;
  padding-top: 24px;
  border-top:  1px solid var(--line);
}

.testimonial .av {
  width:           48px;
  height:          48px;
  border-radius:   50%;
  background:      linear-gradient(135deg, var(--mauve-500), var(--mauve-800));
  color:           #fff;
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-family:     var(--f-display);
  font-style:      italic;
  font-size:       18px;
  flex-shrink:     0;
}

.testimonial .author b  { display: block; font-weight: 600; font-size: 14px; }
.testimonial .author span { display: block; font-size: 13px; color: var(--muted); }
.testimonial .stars { margin-left: auto; color: var(--mauve-700); font-size: 14px; letter-spacing: 2px; }

.mini-list { display: grid; gap: 12px; margin-top: 24px; }

.mini {
  display:       flex;
  gap:           14px;
  align-items:   flex-start;
  padding:       18px 20px;
  background:    var(--cream);
  border:        1px solid var(--line);
  border-radius: 6px;
  transition:    border-color .25s, transform .25s var(--ease-out), box-shadow .25s;
}

.mini:hover {
  border-color: rgba(122, 58, 118, .2);
  transform:    translateY(-1px);
  box-shadow:   0 8px 24px -12px rgba(122, 58, 118, .15);
}

.mini .av-sm {
  width:           34px;
  height:          34px;
  border-radius:   50%;
  background:      var(--mauve-100);
  color:           var(--mauve-800);
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-family:     var(--f-display);
  font-style:      italic;
  font-size:       15px;
  flex-shrink:     0;
}

.mini p { font-size: 14px; color: var(--ink-2); line-height: 1.55; }
.mini p b { display: block; font-size: 13px; color: var(--ink); margin-top: 6px; font-weight: 600; }
.mini p b span { color: var(--muted); font-weight: 400; }

.numbers {
  margin-top:            clamp(56px, 7vw, 96px);
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  border-top:            1px solid var(--line-strong);
  border-bottom:         1px solid var(--line-strong);
}

.numbers > div {
  padding:      32px 24px;
  border-right: 1px solid var(--line);
  transition:   background .25s;
}

.numbers > div:last-child { border-right: 0; }
.numbers > div:hover { background: rgba(122, 58, 118, .04); }

.numbers b {
  display:              block;
  font-family:          var(--f-display);
  font-size:            clamp(38px, 5vw, 68px);
  font-weight:          500;
  line-height:          1;
  color:                var(--ink);
  font-variant-numeric: tabular-nums;
}

.numbers b .plus { color: var(--mauve-700); }

.numbers span { display: block; margin-top: 14px; font-size: 13px; color: var(--muted); letter-spacing: .04em; }

@media (max-width: 900px) {
  .numbers { grid-template-columns: repeat(2, 1fr); }
  .numbers > div:nth-child(2) { border-right: 0; }
  .numbers > div:nth-child(1),
  .numbers > div:nth-child(2) { border-bottom: 1px solid var(--line); }
}


/* ============================================================
   WHY US
   ============================================================ */

.why {
  background:
    radial-gradient(50% 50% at 50% 0%, rgba(200, 143, 196, .15) 0%, transparent 55%),
    var(--cream);
  position: relative;
}

.why .vs {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   1px;
  background:            var(--line);
  border:                1px solid var(--line);
  border-radius:         8px;
  overflow:              hidden;
}

@media (max-width: 780px) {
  .why .vs { grid-template-columns: 1fr; }
}

.vs-col { background: var(--cream); padding: clamp(28px, 3vw, 44px); }
.vs-col.them { background: var(--cream-2); color: var(--muted); }

.vs-col h4 {
  font-family:    var(--f-sans);
  font-size:      12px;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-weight:    600;
  color:          var(--muted);
  margin-bottom:  24px;
  display:        flex;
  align-items:    center;
  gap:            10px;
}

.vs-col.ours h4 { color: var(--mauve-700); }
.vs-col h4::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }

.vs-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; }

.vs-col li {
  display:     flex;
  gap:         14px;
  font-size:   15px;
  line-height: 1.55;
  transition:  transform .2s var(--ease-out);
}

.vs-col.ours li:hover { transform: translateX(4px); }

.vs-col li .ico {
  width:           22px;
  height:          22px;
  flex-shrink:     0;
  border-radius:   50%;
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       13px;
  font-weight:     700;
}

.vs-col.ours li .ico { background: var(--mauve-100); color: var(--mauve-800); }
.vs-col.them li .ico { background: rgba(20, 16, 26, .08); color: var(--muted); }
.vs-col.ours li     { color: var(--ink); }
.vs-col li b        { font-weight: 600; }


/* ============================================================
   CTA BAND
   ============================================================ */

.cta-band {
  background:    linear-gradient(135deg, var(--mauve-800) 0%, var(--mauve-900) 60%, var(--ink) 100%);
  color:         var(--cream);
  position:      relative;
  overflow:      hidden;
  border-radius: 8px;
  box-shadow:    0 40px 80px -40px rgba(59, 26, 56, .6);
}

.cta-band-inner {
  padding:               clamp(48px, 6vw, 88px);
  display:               grid;
  grid-template-columns: 1.3fr 1fr;
  gap:                   48px;
  align-items:           center;
}

@media (max-width: 900px) {
  .cta-band-inner { grid-template-columns: 1fr; }
}

.cta-band h2 { color: var(--cream); max-width: 18ch; margin-top: 18px; }
.cta-band h2 em { color: var(--mauve-300); font-weight: 400; }

.cta-band p { color: rgba(250, 246, 241, .8); max-width: 40ch; margin-top: 18px; font-size: 16px; line-height: 1.7; }

.cta-band .actions { display: flex; gap: 14px; margin-top: 32px; flex-wrap: wrap; }

.cta-band .eyebrow         { color: var(--mauve-300); }
.cta-band .eyebrow::before { background: var(--mauve-300); }

.cta-band .btn-primary { background: var(--cream); color: var(--ink); }
.cta-band .btn-primary .arrow { background: var(--mauve-500); color: #fff; }
.cta-band .btn-primary:hover { background: #fff; }

.cta-band .btn-ghost { color: var(--cream); border-color: rgba(255, 255, 255, .3); }
.cta-band .btn-ghost:hover { background: rgba(255, 255, 255, .08); color: var(--cream); }
.cta-band .btn-ghost .arrow { background: var(--cream); color: var(--ink); }

.cta-band .big-mark {
  position:       absolute;
  right:          -4vw;
  bottom:         -14vw;
  font-family:    var(--f-display);
  font-style:     italic;
  font-size:      clamp(180px, 26vw, 460px);
  color:          rgba(255, 255, 255, .05);
  line-height:    .8;
  pointer-events: none;
  user-select:    none;
}

.cta-side {
  border:          1px solid rgba(255, 255, 255, .16);
  border-radius:   6px;
  padding:         28px;
  background:      rgba(255, 255, 255, .04);
  backdrop-filter: blur(8px);
}

.cta-side b { font-family: var(--f-display); font-style: italic; font-size: 28px; display: block; }
.cta-side > span { color: rgba(250, 246, 241, .6); font-size: 14px; display: block; margin-top: 8px; }

.cta-side .row {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  padding:         14px 0;
  border-top:      1px solid rgba(255, 255, 255, .1);
  font-size:       14px;
}

.cta-side .row:first-of-type { margin-top: 20px; }

.cta-side .row em {
  font-style:     normal;
  color:          rgba(250, 246, 241, .55);
  font-size:      12px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.cta-side a { color: rgba(250, 246, 241, .85); }
.cta-side a:hover { color: var(--mauve-300); text-decoration: underline; text-underline-offset: 3px; }



/* ============================================================
   TWEAKS PANEL
   ============================================================ */

.tweaks {
  position:      fixed;
  right:         20px;
  bottom:        20px;
  z-index:       100;
  width:         300px;
  background:    var(--cream);
  color:         var(--ink);
  border:        1px solid var(--line-strong);
  border-radius: 12px;
  box-shadow:    0 24px 64px -20px rgba(0, 0, 0, .35);
  font-family:   var(--f-sans);
  display:       none;
}

.tweaks.on { display: block; }

.tweaks header {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  padding:         14px 16px;
  border-bottom:   1px solid var(--line);
  font-size:       12px;
  letter-spacing:  .2em;
  text-transform:  uppercase;
  font-weight:     600;
}

.tweaks header button { font-size: 18px; color: var(--muted); }
.tweaks .body { padding: 16px; display: grid; gap: 18px; }

.tweaks label {
  display:        block;
  font-size:      11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color:          var(--muted);
  margin-bottom:  8px;
  font-weight:    600;
}

.tweaks .chips { display: flex; flex-wrap: wrap; gap: 6px; }

.tweaks .chip {
  padding:       8px 12px;
  border:        1px solid var(--line);
  border-radius: 999px;
  font-size:     12px;
  background:    var(--cream);
  cursor:        pointer;
  transition:    background .2s, border-color .2s, color .2s;
}

.tweaks .chip.on { background: var(--ink); color: var(--cream); border-color: var(--ink); }

.tweaks .swatches { display: flex; gap: 8px; }

.tweaks .sw {
  width:         28px;
  height:        28px;
  border-radius: 50%;
  cursor:        pointer;
  border:        2px solid transparent;
  transition:    transform .2s, border-color .2s;
}

.tweaks .sw:hover { transform: scale(1.15); }
.tweaks .sw.on    { border-color: var(--ink); }

.sw--mauve  { background: #7A3A76; }
.sw--slate  { background: #2F3A4C; }
.sw--ruby   { background: #8B2E3F; }
.sw--forest { background: #1F4E3D; }



/* ============================================================
   APOLO TEASER — index.html
   ============================================================ */

.apolo-teaser {
  background:
    radial-gradient(50% 60% at 100% 0%,  rgba(196, 147, 90, .12) 0%, transparent 55%),
    radial-gradient(40% 50% at 0%  100%, rgba(122, 58, 118, .1)  0%, transparent 55%),
    var(--cream-2);
}

.apolo-cats {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   1px;
  background:            var(--line);
  border:                1px solid var(--line);
  border-radius:         6px;
  overflow:              hidden;
}

@media (max-width: 780px) { .apolo-cats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .apolo-cats { grid-template-columns: 1fr; } }

.apolo-cat {
  background:     var(--cream);
  padding:        clamp(24px, 2.5vw, 36px);
  display:        flex;
  flex-direction: column;
  gap:            12px;
  position:       relative;
  overflow:       hidden;
  transition:     background .3s ease;
}

.apolo-cat::after {
  content:        "";
  position:       absolute;
  inset:          0;
  background:     linear-gradient(135deg, rgba(196, 147, 90, .06) 0%, transparent 60%);
  opacity:        0;
  transition:     opacity .3s ease;
  pointer-events: none;
}

.apolo-cat:hover             { background: #FEFAF5; }
.apolo-cat:hover::after      { opacity: 1; }

.apolo-cat__num {
  font-family:  var(--f-display);
  font-style:   italic;
  font-size:    38px;
  color:        var(--apolo-300);
  line-height:  1;
  font-weight:  500;
}

.apolo-cat h3 {
  font-size:  clamp(15px, 1.3vw, 19px);
  margin:     0;
  transition: color .2s;
}

.apolo-cat:hover h3 { color: var(--apolo-700); }

.apolo-cat p {
  font-size:   13px;
  color:       var(--muted);
  line-height: 1.55;
  flex:        1;
  margin:      0;
}

.apolo-cat__arrow {
  font-size:   18px;
  color:       var(--apolo-500);
  margin-top:  auto;
  transition:  transform .25s var(--ease-out);
  display:     inline-block;
}

.apolo-cat:hover .apolo-cat__arrow { transform: translateX(5px); }

.apolo-teaser-cta {
  display:         flex;
  justify-content: center;
  gap:             14px;
  flex-wrap:       wrap;
  margin-top:      clamp(36px, 4vw, 56px);
}