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

    :root {
      --navy:    #181A2E;
      --navy2:   #0F1022;
      --red:     #BB0026;
      --red-dk:  #8E001C;
      --red-glow:#FF1744;
      --white:   #FFFFFF;
      --cream:   #FAF8F5;
      --light:   #F2F3F7;
      --muted:   #7A7F96;
      --border:  #E0E3EE;
      --gold:    #C9A84C;
      --font:    'Strichpunkt Sans','Poppins',sans-serif;
      --serif:   'Strichpunkt Sans','Poppins',sans-serif;;
    }

    html { scroll-behavior:smooth; }
    body { font-family:var(--font); background:var(--cream); overflow-x:hidden; }

    /* ─── SECTION ─────────────────────────────── */
    .products-section {
      padding:20px 0 50px;
      position:relative;
      overflow:hidden;
      background:var(--cream);
    }
    .products-section::before {
      content:''; position:absolute; top:-120px; right:-120px;
      width:500px; height:500px; border-radius:50%;
      background:radial-gradient(circle,rgba(187,0,38,.06) 0%,transparent 70%);
      pointer-events:none;
    }
    .products-section::after {
      content:''; position:absolute; bottom:-80px; left:-80px;
      width:400px; height:400px; border-radius:50%;
      background:radial-gradient(circle,rgba(24,26,46,.05) 0%,transparent 70%);
      pointer-events:none;
    }
    .bg-lines { position:absolute; inset:0; pointer-events:none; overflow:hidden; opacity:.035; }
    .bg-lines::before,.bg-lines::after {
      content:''; position:absolute; width:2px; height:200%;
      background:var(--navy); transform-origin:top center;
    }
    .bg-lines::before { left:20%; top:-50%; transform:rotate(18deg); }
    .bg-lines::after  { right:22%; top:-50%; transform:rotate(-18deg); }

    .container { max-width:1500px; margin:0 auto; padding:0 32px; }

    /* ─── SECTION HEAD ──────────────────────────── */
    .sec-head { text-align:center; margin-bottom:72px; position:relative; z-index:2; }

    .sec-eyebrow {
      display:inline-flex; align-items:center; gap:10px;
      font-size:12px; font-weight:700; letter-spacing:3px;
      text-transform:uppercase; color:var(--red); margin-bottom:18px;
      opacity:0; transform:translateY(20px);
      transition:opacity .6s ease, transform .6s ease;
    }
    .sec-eyebrow.visible { opacity:1; transform:translateY(0); }
    .sec-eyebrow::before,.sec-eyebrow::after {
      content:''; display:block; width:36px; height:2px; background:var(--red);
    }
    .sec-title {
      font-family:var(--serif); font-size:clamp(34px,5vw,58px);
      font-weight:800; color:var(--navy); line-height:1.1; margin-bottom:18px;
      opacity:0; transform:translateY(30px);
      transition:opacity .7s ease .1s, transform .7s ease .1s;
    }
    .sec-title.visible { opacity:1; transform:translateY(0); }
    .sec-title span { color:var(--red); font-style:italic; }
    .sec-desc {
      font-size:16.5px; color:var(--muted); max-width:560px;
      margin:0 auto 28px; line-height:1.75;
      opacity:0; transform:translateY(20px);
      transition:opacity .7s ease .2s, transform .7s ease .2s;
    }
    .sec-desc.visible { opacity:1; transform:translateY(0); }
    .sec-divider {
      display:flex; align-items:center; justify-content:center; gap:12px;
      opacity:0; transition:opacity .7s ease .3s;
    }
    .sec-divider.visible { opacity:1; }
    .sec-divider-line {
      width:80px; height:1.5px;
      background:linear-gradient(90deg,transparent,var(--gold));
    }
    .sec-divider-line:last-child { background:linear-gradient(90deg,var(--gold),transparent); }
    .sec-divider-gem {
      width:8px; height:8px; background:var(--gold); transform:rotate(45deg); position:relative;
    }

    /* ─── FILTER TABS ───────────────────────────── */
    .filter-wrap {
      display:flex; align-items:center; justify-content:center;
      gap:10px; margin-bottom:56px; flex-wrap:wrap;
      opacity:0; transform:translateY(20px);
      transition:opacity .7s ease .35s, transform .7s ease .35s;
    }
    .filter-wrap.visible { opacity:1; transform:translateY(0); }
    .filter-btn {
      padding:9px 22px; border-radius:40px;
      border:1.5px solid var(--border); background:var(--white);
      color:var(--muted); font-size:13.5px; font-weight:500;
      font-family:var(--font); cursor:pointer;
      transition:all .28s ease; white-space:nowrap;
    }
    .filter-btn:hover { border-color:var(--red); color:var(--red); background:rgba(187,0,38,.04); transform:translateY(-1px); }
    .filter-btn.active { background:var(--red); border-color:var(--red); color:var(--white); box-shadow:0 6px 18px rgba(187,0,38,.3); }

    /* ─── GRID ──────────────────────────────────── */
    .products-grid {
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:24px;
      position:relative; z-index:2;
    }

    /* ─── PRODUCT CARD ──────────────────────────── */
    .p-card {
      position:relative; background:var(--white);
      border-radius:16px; overflow:hidden;
      box-shadow:0 4px 24px rgba(24,26,46,.07);
      cursor:pointer;
      transition:transform .4s cubic-bezier(.4,0,.2,1), box-shadow .4s cubic-bezier(.4,0,.2,1);
      opacity:0; transform:translateY(50px);
      display:flex; flex-direction:column;
    }
    .p-card.visible {
      animation:cardReveal .7s cubic-bezier(.4,0,.2,1) forwards;
    }
    @keyframes cardReveal { to { opacity:1; transform:translateY(0); } }
    .p-card:hover {
      transform:translateY(-10px);
      box-shadow:0 24px 56px rgba(24,26,46,.14), 0 0 0 1px rgba(187,0,38,.12);
    }

    /* ── SQUARE IMAGE WRAP ── */
    .p-card__img-wrap {
      position:relative;
      width:100%;
      aspect-ratio:1 / 1;
      overflow:hidden;
      background:var(--light);
      flex-shrink:0;
    }
    .p-card__img-wrap::after {
      content:''; position:absolute; inset:0;
      background:linear-gradient(135deg,rgba(24,26,46,0) 50%,rgba(24,26,46,.55) 100%);
      opacity:0; transition:opacity .4s ease; z-index:2;
    }
    .p-card:hover .p-card__img-wrap::after { opacity:1; }

    .p-card__img {
      width:100%; height:100%; object-fit:cover;
      transition:transform .55s cubic-bezier(.4,0,.2,1);
      display:block;
    }
    .p-card:hover .p-card__img { transform:scale(1.08); }

    .p-card__badge {
      position:absolute; top:0; left:0;
      background:var(--red); color:#fff;
      font-size:11px; font-weight:700; letter-spacing:.6px;
      text-transform:uppercase; padding:7px 20px 7px 14px;
      clip-path:polygon(0 0,100% 0,88% 100%,0 100%);
      z-index:3; opacity:0; transform:translateX(-20px);
      transition:opacity .35s ease .1s, transform .35s ease .1s;
    }
    .p-card:hover .p-card__badge { opacity:1; transform:translateX(0); }

    .p-card__num {
      position:absolute; top:10px; right:14px;
      font-family:var(--serif); font-size:56px; font-weight:800;
      color:rgba(255,255,255,.12); line-height:1;
      z-index:3; pointer-events:none;
      transition:color .4s ease;
    }
    .p-card:hover .p-card__num { color:rgba(255,255,255,.22); }

    .p-card__quick {
      position:absolute; bottom:-50px; left:50%; transform:translateX(-50%);
      background:var(--white); color:var(--navy);
      font-size:12.5px; font-weight:600;
      padding:8px 20px; border-radius:30px;
      white-space:nowrap; z-index:4;
      display:flex; align-items:center; gap:7px;
      transition:bottom .35s cubic-bezier(.4,0,.2,1), box-shadow .35s;
      box-shadow:0 4px 18px rgba(24,26,46,.2);
    }
    .p-card:hover .p-card__quick { bottom:16px; }
    .p-card__quick i { color:var(--red); font-size:11px; }

    .p-card__cat-icon {
      position:absolute; bottom:14px; right:14px;
      width:36px; height:36px; background:var(--white); border-radius:50%;
      display:flex; align-items:center; justify-content:center;
      color:var(--red); font-size:14px;
      box-shadow:0 4px 14px rgba(24,26,46,.18);
      z-index:4; transform:scale(0) rotate(-45deg);
      transition:transform .38s cubic-bezier(.34,1.56,.64,1) .05s;
    }
    .p-card:hover .p-card__cat-icon { transform:scale(1) rotate(0deg); }

    /* ── Card body ── */
    .p-card__body {
      padding:20px 20px 18px;
      position:relative; flex:1;
      display:flex; flex-direction:column;
    }
    .p-card__body::before {
      content:''; position:absolute; top:0; left:20px; right:20px;
      height:2px;
      background:linear-gradient(90deg,var(--red),transparent);
      transform:scaleX(0); transform-origin:left;
      transition:transform .45s cubic-bezier(.4,0,.2,1);
    }
    .p-card:hover .p-card__body::before { transform:scaleX(1); }

    .p-card__title {
      font-size:15px; font-weight:700; color:var(--navy);
      margin-bottom:7px; line-height:1.35;
      transition:color .25s;
    }
    .p-card:hover .p-card__title { color:var(--red); }

    .p-card__desc {
      font-size:12.5px; color:var(--muted);
      line-height:1.6; margin-bottom:16px; flex:1;
    }
    .p-card__footer { display:flex; align-items:center; justify-content:space-between; margin-top:auto; }

    .p-card__tag {
      display:inline-flex; align-items:center; gap:5px;
      font-size:11px; font-weight:600; color:var(--red);
      background:rgba(187,0,38,.07); padding:4px 11px;
      border-radius:20px; text-transform:uppercase; letter-spacing:.4px;
    }

    /* ── OLD btn (kept for fallback, hidden) ── */
    .p-card__btn { display:none; }

    /* ══ NEW: Attractive View More Button ══ */
    .p-card__btn-new {
      display:inline-flex; align-items:center; gap:0;
      font-size:13px; font-weight:600;
      color:var(--red); background:rgba(187,0,38,.08);
      border:1.5px solid rgba(187,0,38,.25);
      border-radius:40px; padding:7px 8px 7px 16px;
      text-decoration:none; font-family:var(--font);
      cursor:pointer; transition:all .3s cubic-bezier(.4,0,.2,1);
      white-space:nowrap; position:relative; overflow:hidden;
    }
    .p-card__btn-new::before {
      content:''; position:absolute; inset:0;
      background:var(--red); transform:scaleX(0); transform-origin:left;
      transition:transform .3s cubic-bezier(.4,0,.2,1); z-index:0;
      border-radius:40px;
    }
    .p-card__btn-new:hover::before { transform:scaleX(1); }
    .p-card__btn-new:hover {
      color:#fff; border-color:var(--red);
      box-shadow:0 6px 20px rgba(187,0,38,.35); transform:translateY(-2px);
    }
    .p-card__btn-new .btn-text { position:relative; z-index:1; }
    .p-card__btn-new .btn-icon {
      position:relative; z-index:1;
      width:26px; height:26px; background:var(--red);
      border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
      margin-left:10px; flex-shrink:0;
      transition:background .3s, transform .3s;
    }
    .p-card__btn-new .btn-icon svg {
      width:11px; height:11px; fill:none;
      stroke:#fff; stroke-width:2.5;
      stroke-linecap:round; stroke-linejoin:round;
      transition:transform .3s;
    }
    .p-card__btn-new:hover .btn-icon { background:rgba(255,255,255,.25); }
    .p-card__btn-new:hover .btn-icon svg { transform:translateX(2px); }

    /* ── FEATURED CARD ── */
    .p-card--featured { grid-column:span 1; }
    .p-card--featured .p-card__img-wrap::before {
      content:''; position:absolute; bottom:-2px; left:0; right:0;
      height:55px; background:var(--white);
      clip-path:ellipse(55% 100% at 50% 100%); z-index:3;
    }
    .p-card--featured .p-card__title { font-size:17px; }
    .p-card--featured .p-card__desc  { font-size:13.5px; }

    /* ─── VIDEO CTA CARD ──────────────────── */
    .p-video-cta {
      background:linear-gradient(135deg,var(--navy) 0%,var(--navy2) 100%);
      border-radius:18px; overflow:hidden; position:relative;
      display:grid; align-items:stretch;
      opacity:0; transform:translateY(50px);
    }
    .p-video-cta.visible {
      animation:cardReveal .7s cubic-bezier(.4,0,.2,1) forwards;
      animation-delay:.5s;
    }

    .vcta-left {
      padding:36px 30px 32px;
      display:flex; flex-direction:column; justify-content:center;
      position:relative; z-index:1;
    }
    .vcta-left::before {
      content:''; position:absolute; top:-60px; right:-60px;
      width:220px; height:220px; border-radius:50%;
      background:rgba(187,0,38,.14); pointer-events:none;
    }
    .vcta-left::after {
      content:''; position:absolute; bottom:-40px; left:30px;
      width:110px; height:110px; border-radius:50%;
      background:rgba(187,0,38,.07); pointer-events:none;
    }
    .vcta-left .tex {
      position:absolute; inset:0;
      background-image:repeating-linear-gradient(
        -55deg, rgba(255,255,255,.018) 0, rgba(255,255,255,.018) 1px,
        transparent 0, transparent 50%
      );
      background-size:12px 12px; pointer-events:none;
    }
    .vcta-tag {
      display:inline-flex; align-items:center; gap:6px;
      font-size:11px; font-weight:700; letter-spacing:2px;
      text-transform:uppercase; color:rgba(255,255,255,.5);
      margin-bottom:14px; position:relative; z-index:1;
    }
    .vcta-tag::before { content:''; width:20px; height:1.5px; background:var(--red); }
    .vcta-left h3 {
      font-family:var(--serif); font-size:24px; font-weight:700;
      color:#fff; line-height:1.3; margin-bottom:10px;
      position:relative; z-index:1;
    }
    .vcta-left h3 em { color:var(--red-glow); font-style:italic; }
    .vcta-left p {
      color:rgba(255,255,255,.55); font-size:13.5px; line-height:1.7;
      margin-bottom:22px; position:relative; z-index:1;
    }
    .vcta-cta-btn {
      display:inline-flex; align-items:center; gap:8px;
      padding:11px 24px; background:var(--red); color:#fff;
      border:none; border-radius:8px; font-size:14px; font-weight:600;
      font-family:var(--font); cursor:pointer; align-self:flex-start;
      transition:background .25s, transform .25s, box-shadow .25s;
      position:relative; z-index:1;
    }
    .vcta-cta-btn:hover { background:var(--red-dk); transform:translateY(-2px); box-shadow:0 8px 24px rgba(187,0,38,.4); }
    .vcta-stats {
      display:flex; gap:22px; margin-top:22px; position:relative; z-index:1;
    }
    .vcta-stat { display:flex; flex-direction:column; }
    .vcta-stat strong { font-size:22px; font-weight:800; color:#fff; }
    .vcta-stat span   { font-size:10.5px; color:rgba(255,255,255,.4); text-transform:uppercase; letter-spacing:.8px; }

    .vcta-right {
      display:flex; flex-direction:column; gap:0;
      border-left:1px solid rgba(255,255,255,.08);
      overflow:hidden;
    }
    .vid-item {
      flex:1; position:relative; overflow:hidden; cursor:pointer;
    }
    .vid-item + .vid-item { border-top:1px solid rgba(255,255,255,.08); }
    .vid-item video {
      width:100%; height:100%; object-fit:cover; display:block;
      transition:transform .5s ease;
    }
    .vid-item:hover video { transform:scale(1.05); }
    .vid-play-btn {
      position:absolute; inset:0;
      display:flex; align-items:center; justify-content:center;
      transition:background .3s; z-index:2;
    }
    .vid-item:hover .vid-play-btn { background:rgba(24,26,46,.15); }
    .vid-play-btn i {
      width:48px; height:48px;
      background:rgba(187,0,38,.9); border-radius:50%;
      display:flex; align-items:center; justify-content:center;
      font-size:18px; color:#fff; transform:scale(1);
      transition:transform .3s cubic-bezier(.34,1.56,.64,1), background .3s;
      box-shadow:0 6px 24px rgba(187,0,38,.5);
    }
    .vid-item:hover .vid-play-btn i { transform:scale(1.15); background:var(--red); }
    .vid-label {
      position:absolute; bottom:0; left:0; right:0;
      padding:20px 16px 14px;
      background:linear-gradient(transparent, rgba(15,16,30,.85));
      color:rgba(255,255,255,.85);
      font-size:12px; font-weight:600; text-transform:uppercase;
      letter-spacing:1px; z-index:3;
    }
    .vid-label i { color:var(--red); margin-right:6px; }

    /* ─── STAGGER DELAYS ─── */
    .p-card:nth-child(1) { animation-delay:.00s; }
    .p-card:nth-child(2) { animation-delay:.08s; }
    .p-card:nth-child(3) { animation-delay:.16s; }
    .p-card:nth-child(4) { animation-delay:.24s; }
    .p-card:nth-child(5) { animation-delay:.08s; }
    .p-card:nth-child(6) { animation-delay:.16s; }
    .p-card:nth-child(7) { animation-delay:.24s; }

    /* ─── MODAL ─────── */
    .modal-overlay {
      position:fixed; inset:0;
      background:rgba(15,16,30,.78);
      z-index:3000;
      display:flex; align-items:center; justify-content:center;
      opacity:0; visibility:hidden;
      transition:opacity .35s, visibility .35s;
      backdrop-filter:blur(8px);
      padding:20px;
    }
    .modal-overlay.is-open { opacity:1; visibility:visible; }
    .modal {
      background:var(--white); border-radius:20px;
      max-width:480px; width:100%;
      display:flex; flex-direction:column;
      overflow:hidden;
      transform:scale(.9) translateY(24px);
      transition:transform .4s cubic-bezier(.34,1.1,.64,1);
      box-shadow:0 32px 80px rgba(0,0,0,.38);
      max-height:90vh; position:relative;
    }
    .modal-overlay.is-open .modal { transform:scale(1) translateY(0); }
    .modal__img {
      width:100%; aspect-ratio:1 / 1; flex-shrink:0;
      background:var(--light); overflow:hidden; position:relative;
    }
    .modal__img img { width:100%; height:100%; object-fit:cover; display:block; }
    .modal__img::after {
      content:''; position:absolute; inset:0;
      background:linear-gradient(180deg, transparent 60%, rgba(24,26,46,.5) 100%);
    }
    .modal__body { padding:26px 28px 28px; overflow-y:auto; flex:1; }
    .modal__body::-webkit-scrollbar { width:4px; }
    .modal__body::-webkit-scrollbar-thumb { background:var(--border); border-radius:4px; }
    .modal__tag {
      display:inline-flex; align-items:center; gap:5px;
      background:rgba(187,0,38,.08); color:var(--red);
      font-size:11.5px; font-weight:700; text-transform:uppercase;
      letter-spacing:.7px; padding:5px 13px; border-radius:20px; margin-bottom:12px;
    }
    .modal__title {
      font-family:var(--serif); font-size:23px; font-weight:800;
      color:var(--navy); margin-bottom:10px; line-height:1.25;
    }
    .modal__desc { color:var(--muted); font-size:13.5px; line-height:1.75; margin-bottom:20px; }
    .modal__feats { margin-bottom:22px; }
    .modal__feat {
      display:flex; align-items:center; gap:9px;
      font-size:13px; color:var(--navy);
      padding:7px 0; border-bottom:1px solid var(--border);
    }
    .modal__feat:last-child { border:none; }
    .modal__feat i { color:var(--red); font-size:11px; flex-shrink:0; }
    .modal__actions { display:flex; gap:12px; }
    .modal__btn-primary {
      flex:1; padding:13px; background:var(--red); color:#fff;
      border:none; border-radius:8px; font-size:14px; font-weight:600;
      font-family:var(--font); cursor:pointer; transition:background .25s, transform .25s;
    }
    .modal__btn-primary:hover { background:var(--red-dk); transform:translateY(-1px); }
    .modal__btn-secondary {
      padding:13px 20px; background:var(--light); color:var(--navy);
      border:none; border-radius:8px; font-size:14px; font-weight:600;
      font-family:var(--font); cursor:pointer; transition:background .25s;
    }
    .modal__btn-secondary:hover { background:var(--border); }
    .modal__close {
      position:absolute; top:14px; right:14px;
      width:36px; height:36px; background:rgba(255,255,255,.95);
      border:none; border-radius:50%; font-size:15px; cursor:pointer;
      display:flex; align-items:center; justify-content:center; color:var(--navy);
      transition:background .25s, transform .3s;
      box-shadow:0 2px 12px rgba(0,0,0,.18); z-index:5;
    }
    .modal__close:hover { background:var(--red); color:#fff; transform:rotate(90deg); }

    /* ─── RESPONSIVE ────────────────────────────── */
    @media(max-width:1200px){
      .products-grid { grid-template-columns:repeat(3,1fr); gap:20px; }
      .p-card--featured { grid-column:span 2; }
      .p-video-cta     { grid-column:span 3; }
      .vcta-right      { flex-direction:row; }
      .vid-item + .vid-item { border-top:none; border-left:1px solid rgba(255,255,255,.08); }
    }
    @media(max-width:900px){
      .products-section { padding:72px 0 90px; }
      .products-grid { grid-template-columns:repeat(2,1fr); gap:16px; }
      .p-card--featured { grid-column:span 2; }
      .p-video-cta      { grid-column:span 2; grid-template-columns:1fr; }
      .vcta-right       { height:220px; flex-direction:row; border-left:none; border-top:1px solid rgba(255,255,255,.08); }
      .container { padding:0 20px; }
    }
    @media(max-width:640px){
      .products-section { padding:56px 0 70px; }
      .products-grid { grid-template-columns:1fr 1fr; gap:12px; }
      .p-card--featured { grid-column:span 2; }
      .p-video-cta      { grid-column:span 2; }
      .vcta-right       { height:200px; }
      .p-card__desc     { display:none; }
      .modal { max-width:100%; margin:0 8px; }
      .container { padding:0 14px; }
      .filter-wrap { gap:6px; }
      .filter-btn  { padding:7px 14px; font-size:12px; }
    }
    @media(max-width:420px){
      .products-grid { grid-template-columns:1fr; gap:14px; }
      .p-card--featured { grid-column:span 1; }
      .p-video-cta      { grid-column:span 1; }
      .vcta-right       { height:180px; }
      .p-card__desc     { display:block; font-size:12px; }
      .modal__actions   { flex-direction:column; }
    }





































    /* ─────────────────────────────────────────────
   ROOT VARIABLES
───────────────────────────────────────────── */
:root{
  --navy:    #181A2E;
  --navy2:   #1e2240;
  --white:   #FFFFFF;
  --red:     #BB0026;
  --red2:    #8f001d;
  --red3:    #d9002d;
  --cream:   #FAF9F7;
  --cream2:  #F2F0EC;
  --light:   #F7F7FB;
  --gold:    #C9A84C;
  --grey:    #6b7280;
  --grey2:   #9ca3af;
  --border:  rgba(24,26,46,.09);
  --sh1:     0 4px 24px rgba(24,26,46,.08);
  --sh2:     0 12px 48px rgba(24,26,46,.13);
  --sh3:     0 24px 72px rgba(24,26,46,.18);
  --r:       14px;
  --r2:      8px;
  --T:       cubic-bezier(.4,0,.2,1);
  --fh:      'Strichpunkt Sans','Poppins',sans-serif;
  --fs:      'Strichpunkt Sans','Poppins',sans-serif;
  --fb:      'Strichpunkt Sans','Poppins',sans-serif;
}

/* ─────────────────────────────────────────────
   RESET & BASE
───────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--fb);
  background:var(--cream);
  color:var(--navy);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}

/* ─────────────────────────────────────────────
   SCROLL REVEAL
───────────────────────────────────────────── */
.sr{opacity:0;transform:translateY(44px);transition:opacity .75s var(--T),transform .75s var(--T);will-change:opacity,transform}
.sr.v{opacity:1;transform:translateY(0)}
.sl{opacity:0;transform:translateX(-52px);transition:opacity .75s var(--T),transform .75s var(--T);will-change:opacity,transform}
.sl.v{opacity:1;transform:translateX(0)}
.srr{opacity:0;transform:translateX(52px);transition:opacity .75s var(--T),transform .75s var(--T);will-change:opacity,transform}
.srr.v{opacity:1;transform:translateX(0)}
.d1{transition-delay:.1s}.d2{transition-delay:.2s}.d3{transition-delay:.32s}
.d4{transition-delay:.44s}.d5{transition-delay:.56s}.d6{transition-delay:.68s}

.wrap{max-width:1200px;margin:0 auto;padding:0 28px}

/* eyebrow label */
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--fs);font-size:.72rem;letter-spacing:3.5px;
  text-transform:uppercase;color:var(--red);font-weight:500;
  margin-bottom:14px;
}
.eyebrow::before{content:'';width:28px;height:1.5px;background:var(--red)}

/* ═══════════════════════════════════════════════
   SECTION 1 ── TESTIMONIALS
═══════════════════════════════════════════════ */
.testi{
  position:relative;
  padding:0;
  overflow:hidden;
  isolation:isolate;
  min-height:620px;
  display:flex;flex-direction:column;justify-content:center;
}

/* ── Background image layer ── */
.testi-bg{
  position:absolute;inset:0;z-index:0;
  background:
    url('./img/testo.png') center/cover no-repeat;
  will-change:transform;
  transition:transform .1s linear;
}
/* dark overlay — two layers for depth */
.testi-bg::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(
    135deg,
    rgba(24,26,46,.94) 0%,
    rgba(24,26,46,.80) 45%,
    rgba(187,0,38,.35) 100%
  );
}
/* subtle grid texture */
.testi-bg::after{
  content:'';position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:48px 48px;
}

/* decorative large quote mark */
.testi-qmark{
  position:absolute;
  top:60px;right:80px;
  font-family:var(--fh);
  font-size:clamp(200px,22vw,320px);
  font-weight:700;
  color:rgba(187,0,38,.09);
  line-height:1;
  user-select:none;pointer-events:none;
  z-index:1;
  font-style:italic;
}

.testi .wrap{
  position:relative;z-index:2;
  padding-top:90px;padding-bottom:90px;
}

/* ── layout ── */
.testi-layout{
  display:grid;
  grid-template-columns:320px 1fr;
  gap:80px;
  align-items:center;
}

/* ── left panel ── */
.testi-left .eyebrow{color:rgba(255,255,255,.5)}
.testi-left .eyebrow::before{background:rgba(255,255,255,.3)}
.testi-left h2{
  font-family:var(--fh);
  font-size:clamp(2rem,3.5vw,3rem);
  font-weight:700;
  color:var(--white);
  line-height:1.2;
  margin-bottom:18px;
}
.testi-left h2 em{color:var(--red3);font-style:italic}
.testi-left p{
  font-size:.93rem;
  color:rgba(255,255,255,.5);
  line-height:1.82;
  margin-bottom:32px;
}

/* rating summary */
.rating-box{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
  border-radius:var(--r);
  padding:22px 24px;
  display:flex;align-items:center;gap:18px;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  margin-bottom:28px;
}
.rating-big{
  font-family:var(--fh);font-size:3rem;font-weight:700;
  color:var(--white);line-height:1;font-style:italic;
  flex-shrink:0;
}
.rating-stars i{color:var(--gold);font-size:.85rem;margin-right:1px}
.rating-label{
  font-family:var(--fs);font-size:.72rem;letter-spacing:2px;
  text-transform:uppercase;color:rgba(255,255,255,.4);
  margin-top:5px;
}

/* counter dots */
.testi-dots{
  display:flex;gap:8px;align-items:center;margin-top:30px;
}
.tdot{
  width:8px;height:8px;border-radius:50%;
  background:rgba(255,255,255,.2);
  transition:all .4s var(--T);cursor:pointer;
  border:none;padding:0;
}
.tdot.active{
  width:28px;border-radius:4px;
  background:var(--red);
}

/* ── slider right ── */
.testi-slider-wrap{
  position:relative;
  overflow:hidden;
}

.testi-track{
  display:flex;
  transition:transform .65s var(--T);
  will-change:transform;
}

.tcard{
  flex:0 0 100%;
  padding:40px 42px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.1);
  border-radius:var(--r);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  position:relative;
  overflow:hidden;
}
/* top accent bar */
.tcard::before{
  content:'';position:absolute;
  top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--red),transparent);
}
/* quote icon inside card */
.tcard-quote{
  font-family:var(--fh);
  font-size:5rem;line-height:.7;
  color:rgba(187,0,38,.35);
  font-style:italic;
  display:block;
  margin-bottom:8px;
}
.tcard-text{
  font-family:var(--fh);
  font-size:clamp(1.1rem,1.6vw,1.35rem);
  color:rgba(255,255,255,.9);
  line-height:1.72;
  font-style:italic;
  margin-bottom:30px;
}
.tcard-bottom{
  display:flex;align-items:center;gap:16px;
  border-top:1px solid rgba(255,255,255,.1);
  padding-top:22px;
}
/* avatar circle */
.tcard-avatar{
  width:52px;height:52px;border-radius:50%;
  background:var(--red);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--fs);font-size:.95rem;font-weight:600;
  color:var(--white);flex-shrink:0;
  border:2px solid rgba(255,255,255,.2);
}
.tcard-name{
  font-family:var(--fs);font-size:.98rem;font-weight:600;
  color:var(--white);letter-spacing:.5px;
}
.tcard-role{font-size:.8rem;color:rgba(255,255,255,.45);margin-top:3px}
.tcard-stars{
  margin-left:auto;
  display:flex;gap:3px;
}
.tcard-stars i{color:var(--gold);font-size:.82rem}

/* nav arrows */
.testi-arrows{
  display:flex;gap:12px;margin-top:22px;justify-content:flex-end;
}
.tarr{
  width:44px;height:44px;border-radius:50%;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
  color:var(--white);font-size:.95rem;
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all .3s var(--T);
}
.tarr:hover{background:var(--red);border-color:var(--red);transform:scale(1.08)}

/* progress bar */
.testi-progress{
  height:2px;
  background:rgba(255,255,255,.1);
  border-radius:1px;
  margin-top:16px;
  overflow:hidden;
}
.testi-progress-bar{
  height:100%;
  background:var(--red);
  border-radius:1px;
  width:0%;
  transition:width linear;
}

/* ═══════════════════════════════════════════════
   SECTION 2 ── FAQ
═══════════════════════════════════════════════ */
.faq{
  background:var(--white);
  padding:100px 0 90px;
  position:relative;overflow:hidden;
}
/* top stripe */
.faq::before{
  content:'';position:absolute;
  top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--navy) 0%,var(--red) 50%,var(--navy) 100%);
}
/* bg watermark */
.faq-wm{
  position:absolute;bottom:-40px;right:-20px;
  font-family:var(--fh);font-size:clamp(150px,18vw,260px);
  font-weight:700;color:rgba(24,26,46,.03);
  user-select:none;pointer-events:none;line-height:1;
  font-style:italic;
}

.faq-inner{
  display:grid;
  grid-template-columns:380px 1fr;
  gap:80px;
  align-items:start;
}

/* ── left sticky ── */
.faq-left{
  position:sticky;top:40px;
}
.faq-left h2{
  font-family:var(--fh);font-size:clamp(2rem,3vw,2.8rem);
  font-weight:700;color:var(--navy);line-height:1.2;
  margin-bottom:16px;
}
.faq-left h2 em{color:var(--red);font-style:italic}
.faq-left p{
  font-size:.93rem;color:var(--grey);line-height:1.82;
  margin-bottom:28px;
}
/* still have questions box */
.faq-cta{
  background:var(--navy);
  border-radius:var(--r);
  padding:28px 26px;
  margin-top:36px;
  position:relative;overflow:hidden;
}
.faq-cta::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(circle at 100% 0%,rgba(187,0,38,.2) 0%,transparent 60%);
  pointer-events:none;
}
.faq-cta h4{
  font-family:var(--fs);font-size:.95rem;font-weight:600;
  color:var(--white);letter-spacing:.5px;margin-bottom:8px;
  position:relative;z-index:1;
}
.faq-cta p{
  font-size:.82rem;color:rgba(255,255,255,.45);
  line-height:1.65;margin-bottom:18px;
  position:relative;z-index:1;
}
.faq-cta a{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--fs);font-size:.78rem;letter-spacing:2px;
  text-transform:uppercase;font-weight:500;
  color:var(--white);background:var(--red);
  padding:11px 22px;border-radius:var(--r2);
  transition:all .3s var(--T);
  position:relative;z-index:1;
}
.faq-cta a:hover{background:var(--red2);transform:translateY(-2px);box-shadow:0 6px 20px rgba(187,0,38,.4)}

/* category pills */
.faq-cats{
  display:flex;flex-wrap:wrap;gap:8px;
  margin-bottom:28px;
}
.fcat{
  font-family:var(--fs);font-size:.72rem;letter-spacing:1.5px;
  text-transform:uppercase;
  padding:7px 16px;border-radius:50px;
  border:1.5px solid var(--border);
  color:var(--grey);background:var(--cream);
  cursor:pointer;transition:all .3s var(--T);
}
.fcat:hover,.fcat.active{
  background:var(--red);color:var(--white);
  border-color:var(--red);
}

/* ── right accordion ── */
.faq-list{display:flex;flex-direction:column;gap:0}

.faq-item{
  border-bottom:1px solid var(--border);
  overflow:hidden;
}
.faq-item:first-child{border-top:1px solid var(--border)}

.faq-q{
  width:100%;text-align:left;
  background:transparent;border:none;
  display:flex;align-items:center;gap:16px;
  padding:22px 4px;cursor:pointer;
  transition:all .3s var(--T);
}
.faq-q:hover .fq-text{color:var(--red)}

/* number badge */
.fq-num{
  width:30px;height:30px;border-radius:50%;
  background:rgba(24,26,46,.07);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  font-family:var(--fs);font-size:.7rem;font-weight:600;
  color:var(--grey);letter-spacing:.5px;
  transition:all .3s var(--T);
}
.faq-item.open .fq-num{background:var(--red);color:var(--white)}

.fq-text{
  font-family:var(--fs);font-size:1.0rem;font-weight:500;
  color:var(--navy);letter-spacing:.3px;
  flex:1;text-align:left;line-height:1.45;
  transition:color .3s;
}
.faq-item.open .fq-text{color:var(--red)}

/* plus/minus icon */
.fq-icon{
  width:34px;height:34px;border-radius:50%;
  background:var(--cream);
  border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  font-size:.8rem;color:var(--navy);
  transition:all .4s var(--T);
}
.faq-item.open .fq-icon{
  background:var(--red);color:var(--white);
  border-color:var(--red);transform:rotate(45deg);
}

/* answer body */
.faq-a{
  max-height:0;
  overflow:hidden;
  transition:max-height .45s var(--T),padding .45s var(--T);
}
.faq-a-inner{
  padding:0 4px 22px 46px;
  font-size:.9rem;color:var(--grey);line-height:1.85;
}
.faq-item.open .faq-a{max-height:360px}

/* highlight text inside answer */
.faq-a-inner strong{color:var(--navy)}
.faq-a-inner em{color:var(--red);font-style:normal}

/* ─────────────────────────────────────────────
   RESPONSIVE
───────────────────────────────────────────── */
@media(max-width:1024px){
  .testi-layout{grid-template-columns:1fr;gap:44px}
  .testi-left{text-align:left}
  .testi .wrap{padding-top:70px;padding-bottom:70px}
  .faq-inner{grid-template-columns:1fr;gap:40px}
  .faq-left{position:static}
  .faq-wm{display:none}
}
@media(max-width:768px){
  .testi-layout{gap:36px}
  .tcard{padding:28px 24px}
  .tcard-text{font-size:1.05rem}
  .testi-qmark{display:none}
  .faq{padding:68px 0 72px}
  .faq-inner{gap:32px}
}
@media(max-width:520px){
  .testi .wrap{padding-top:56px;padding-bottom:56px}
  .tcard{padding:24px 20px}
  .rating-box{flex-direction:column;align-items:flex-start;gap:10px}
  .tcard-bottom{flex-wrap:wrap}
  .tcard-stars{margin-left:0;margin-top:8px;width:100%}
  .tarr{width:38px;height:38px;font-size:.85rem}
  .faq-cats{gap:6px}
  .fq-text{font-size:.9rem}
}