/* ── Base ── */
    *, *::before, *::after { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      font-family: 'DM Sans', sans-serif;
      background: #0f0606;
      color: #f5ede8;
      overflow-x: hidden;
    }

    /* ── AOS-lite (custom scroll reveal) ── */
    [data-aos] { opacity: 0; transform: translateY(32px); transition: opacity .6s ease, transform .6s ease; }
    [data-aos="fade-left"]  { transform: translateX(-36px); }
    [data-aos="fade-right"] { transform: translateX(36px); }
    [data-aos="zoom-in"]    { transform: scale(.9); }
    [data-aos].aos-animate  { opacity: 1 !important; transform: none !important; }

    /* ── Mesh gradient background ── */
    .mesh-bg {
      background: radial-gradient(ellipse 80% 60% at 20% 20%, rgba(215,38,56,.18) 0%, transparent 60%),
                  radial-gradient(ellipse 60% 50% at 80% 70%, rgba(244,80,10,.14) 0%, transparent 55%),
                  radial-gradient(ellipse 40% 40% at 50% 90%, rgba(45,190,108,.08) 0%, transparent 50%),
                  #0f0606;
    }

    /* ── Floating card keyframes ── */
    @keyframes float-a { 0%,100%{transform:translateY(0) rotate(-2deg)}  50%{transform:translateY(-14px) rotate(-2deg)} }
    @keyframes float-b { 0%,100%{transform:translateY(0) rotate(2deg)}   50%{transform:translateY(-10px) rotate(2deg)} }
    @keyframes float-c { 0%,100%{transform:translateY(0) rotate(-1deg)}  50%{transform:translateY(-18px) rotate(-1deg)} }
    .float-a { animation: float-a 5s ease-in-out infinite; }
    .float-b { animation: float-b 6s ease-in-out infinite; }
    .float-c { animation: float-c 7s ease-in-out infinite; }

    /* ── Gradient text ── */
    .grad-text {
      background: linear-gradient(120deg, #F7941D 0%, #D72638 50%, #F4500A 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    .grad-green {
      background: linear-gradient(120deg, #2DBE6C, #7FE7A8);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    /* ── Buttons ── */
    .btn-primary {
      background: linear-gradient(135deg, #D72638, #F4500A);
      color: #fff;
      padding: .75rem 2rem;
      border-radius: 9999px;
      font-family: 'Syne', sans-serif;
      font-weight: 700;
      font-size: .95rem;
      letter-spacing: .02em;
      transition: transform .2s, box-shadow .2s, filter .2s;
      box-shadow: 0 4px 24px rgba(215,38,56,.35);
      display: inline-block;
      cursor: pointer;
      border: none;
    }
    .btn-primary:hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 8px 32px rgba(215,38,56,.55); filter: brightness(1.08); }

    .btn-ghost {
      border: 1.5px solid rgba(247,148,29,.5);
      color: #F7941D;
      padding: .72rem 1.8rem;
      border-radius: 9999px;
      font-family: 'Syne', sans-serif;
      font-weight: 700;
      font-size: .95rem;
      transition: background .2s, color .2s, transform .2s;
      display: inline-block;
      cursor: pointer;
      background: transparent;
    }
    .btn-ghost:hover { background: rgba(247,148,29,.12); transform: translateY(-2px); }

    /* ── Navbar ── */
    #navbar {
      transition: background .3s, box-shadow .3s;
    }
    #navbar.scrolled {
      background: rgba(15,6,6,.92) !important;
      backdrop-filter: blur(14px);
      box-shadow: 0 2px 24px rgba(215,38,56,.12);
    }

    /* ── Feature cards ── */
    .feat-card {
      background: linear-gradient(145deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
      border: 1px solid rgba(255,255,255,.07);
      border-radius: 1.25rem;
      transition: transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s, border-color .3s;
    }
    .feat-card:hover {
      transform: translateY(-8px) scale(1.025) perspective(600px) rotateX(2deg);
      box-shadow: 0 20px 50px rgba(215,38,56,.2);
      border-color: rgba(215,38,56,.35);
    }

    /* ── Step cards ── */
    .step-card {
      background: linear-gradient(135deg, rgba(215,38,56,.08), rgba(244,80,10,.04));
      border: 1px solid rgba(215,38,56,.18);
      border-radius: 1rem;
    }

    /* ── Mock UI ── */
    .mock-screen {
      background: linear-gradient(145deg, #1e0c0c, #2a1010);
      border: 1px solid rgba(255,255,255,.1);
      border-radius: 1rem;
      box-shadow: 0 30px 80px rgba(0,0,0,.6), 0 0 0 1px rgba(215,38,56,.1);
    }

    /* ── Pricing ── */
    .pricing-card {
      background: linear-gradient(145deg, rgba(34,16,16,.9), rgba(26,10,10,.9));
      border: 1px solid rgba(255,255,255,.08);
      border-radius: 1.5rem;
      transition: transform .3s, box-shadow .3s;
    }
    .pricing-card:hover { transform: translateY(-6px); box-shadow: 0 24px 60px rgba(215,38,56,.18); }
    .pricing-card.popular {
      border-color: #D72638;
      box-shadow: 0 0 40px rgba(215,38,56,.2);
    }

    /* ── Testimonials ── */
    .testi-card {
      background: linear-gradient(145deg, rgba(34,16,16,.8), rgba(20,8,8,.8));
      border: 1px solid rgba(255,255,255,.07);
      border-radius: 1.25rem;
      transition: transform .3s, box-shadow .3s;
    }
    .testi-card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(215,38,56,.15); }

    /* ── FAQ Accordion ── */
    .faq-item { border-bottom: 1px solid rgba(255,255,255,.07); }
    .faq-body { max-height: 0; overflow: hidden; transition: max-height .4s ease, padding .3s; }
    .faq-body.open { max-height: 300px; padding-bottom: 1rem; }
    .faq-icon { transition: transform .3s; }
    .faq-icon.open { transform: rotate(45deg); }

    /* ── Demo tabs ── */
    .demo-tab { transition: all .25s; border-bottom: 2px solid transparent; }
    .demo-tab.active { border-color: #D72638; color: #F7941D; }

    /* ── Tab panels: stack with opacity crossfade — zero reflow ── */
    #demo-panels {
      position: relative;
    }
    .tab-panel {
      position: absolute;
      inset: 0;
      opacity: 0;
      pointer-events: none;
      transition: opacity .35s cubic-bezier(.4,0,.2,1);
      will-change: opacity;
    }
    .tab-panel.tab-active {
      position: relative;   /* takes up space only when active */
      opacity: 1;
      pointer-events: auto;
    }

    /* ── Section divider ── */
    .section-divider {
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(215,38,56,.3), transparent);
      margin: 0 auto;
      max-width: 800px;
    }

    /* ── Glow dot ── */
    .glow-dot {
      width: 8px; height: 8px; border-radius: 50%;
      background: #2DBE6C;
      box-shadow: 0 0 10px #2DBE6C, 0 0 24px rgba(45,190,108,.5);
      animation: pulse-dot 2s ease-in-out infinite;
    }
    @keyframes pulse-dot { 0%,100%{box-shadow:0 0 8px #2DBE6C, 0 0 20px rgba(45,190,108,.4)} 50%{box-shadow:0 0 16px #2DBE6C, 0 0 40px rgba(45,190,108,.7)} }

    /* ── Mobile menu ── */
    #mobile-menu { transition: max-height .35s ease, opacity .3s; max-height: 0; opacity: 0; overflow: hidden; }
    #mobile-menu.open { max-height: 400px; opacity: 1; }

    /* ── Stat counter ── */
    .stat-card {
      background: linear-gradient(135deg, rgba(215,38,56,.1), rgba(244,80,10,.06));
      border: 1px solid rgba(215,38,56,.2);
      border-radius: 1rem;
    }

    /* ── Noise overlay ── */
    body::before {
      content: '';
      position: fixed; inset: 0;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.03'/%3E%3C/svg%3E");
      pointer-events: none; z-index: 0;
    }
    section, nav, footer { position: relative; z-index: 1; }

    /* ── Recmax v2 additions ── */
    section[id] { scroll-margin-top: 80px; }
    a:focus-visible, button:focus-visible { outline: 2px solid #F7941D; outline-offset: 2px; border-radius: .5rem; }
    .eyebrow { font-size:.75rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:#F4500A; }
    .chip { font-size:.7rem; padding:.25rem .65rem; border-radius:9999px; background:rgba(255,255,255,.05); color:rgba(255,255,255,.55); }
    .badge-ready  { background:rgba(45,190,108,.12); color:#2DBE6C; border:1px solid rgba(45,190,108,.25); }
    .badge-custom { background:rgba(247,148,29,.1); color:#F7941D; border:1px solid rgba(247,148,29,.25); }
    .ph { border:1.5px dashed rgba(247,148,29,.4); background:rgba(247,148,29,.04); border-radius:.75rem; color:rgba(247,148,29,.75); }
    .sol-card { background:linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.01)); border:1px solid rgba(255,255,255,.08); border-radius:1.5rem; transition:transform .3s, box-shadow .3s, border-color .3s; }
    .sol-card:hover { transform:translateY(-6px); box-shadow:0 24px 60px rgba(215,38,56,.18); border-color:rgba(215,38,56,.35); }
    .link-arrow { font-family:'Syne',sans-serif; font-weight:700; font-size:.875rem; color:#F7941D; transition:color .2s; }
    .link-arrow:hover { color:#fff; }
    /* Desktop dropdowns (hover + keyboard focus) */
    .dd { position:relative; }
    .dd-menu { position:absolute; top:100%; left:-1rem; padding-top:.9rem; min-width:17rem; opacity:0; visibility:hidden; transform:translateY(6px); transition:opacity .2s, transform .2s, visibility .2s; }
    .dd-menu > div { background:rgba(26,10,10,.98); border:1px solid rgba(215,38,56,.2); border-radius:1rem; padding:.5rem; box-shadow:0 20px 50px rgba(0,0,0,.55); backdrop-filter:blur(14px); }
    .dd:hover .dd-menu, .dd:focus-within .dd-menu { opacity:1; visibility:visible; transform:none; }
    .dd-menu a { display:block; padding:.6rem .85rem; border-radius:.6rem; color:rgba(255,255,255,.7); font-size:.875rem; }
    .dd-menu a:hover { background:rgba(215,38,56,.14); color:#fff; }
    /* Mobile menu accordion */
    #mobile-menu.open { max-height:85vh; overflow-y:auto; }
    .m-sub { max-height:0; overflow:hidden; transition:max-height .3s ease; }
    .m-sub.open { max-height:320px; }

    /* ── Font Awesome + solution showcase ── */
    .faq-icon { display:inline-block; }
    .feat-card > div[aria-hidden="true"] { color:#F7941D; }
    .m-acc i { transition:transform .25s; }
    .m-acc[aria-expanded="true"] i { transform:rotate(180deg); }
    .sol-panel:hover { transform:none; }
    .cap { display:flex; align-items:center; gap:.5rem; padding:.55rem .75rem; border-radius:.75rem; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.07); font-size:.8rem; color:rgba(255,255,255,.78); min-width:0; }
    .cap i { color:#2DBE6C; font-size:.7rem; flex-shrink:0; }
    .mod { border:1px solid rgba(255,255,255,.08); border-radius:.9rem; background:rgba(255,255,255,.02); }
    .mod-sum { cursor:pointer; list-style:none; }
    .mod-sum::-webkit-details-marker { display:none; }
    .mod-sum i { transition:transform .25s; }
    .mod[open] .mod-sum i { transform:rotate(180deg); }
    .mod > div { padding:0 1rem 1.25rem; }
    .mod-list { list-style:none; margin:0; padding:0; }
    .mod-list li { position:relative; padding-left:.9rem; font-size:.78rem; line-height:1.6; color:rgba(255,255,255,.55); }
    .mod-list li::before { content:''; position:absolute; left:0; top:.6em; width:5px; height:5px; border-radius:50%; background:linear-gradient(135deg,#D72638,#F4500A); }
    .sample-tag { flex-shrink:0; font-size:9px; letter-spacing:.06em; text-transform:uppercase; padding:.15rem .5rem; border-radius:9999px; border:1px dashed rgba(247,148,29,.4); color:rgba(247,148,29,.85); }

    /* ── Responsive hardening (mobile overflow fixes) ── */
    .grid > *, #demo-panels, .mock-screen { min-width: 0; }
    input, select, textarea { min-width: 0; max-width: 100%; }
    address { font-style: normal; }
    /* Hero composition: 2-column grid on mobile, layered absolute composition from 640px */
    .hero-comp { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.75rem; align-content:start; }
    .hc { position:relative; min-width:0; max-width:100%; }
    .hc2 { margin-top:1.75rem; }
    .hc3, .hc4 { grid-column:span 2; }
    @media (min-width:640px) {
      .hero-comp { display:block; }
      .hc { position:absolute; }
      .hc2 { margin-top:0; }
      .hc1 { top:2%; left:0; width:16rem; z-index:2; }
      .hc2 { top:8%; right:0; width:16rem; z-index:3; }
      .hc3 { bottom:4%; left:4%; width:16rem; z-index:3; }
      .hc4 { bottom:0; right:2%; width:13rem; z-index:2; }
    }

    /* ── Success stories gallery ── */
    .gallery { position:relative; margin-bottom:1.25rem; }
    .g-view { position:relative; overflow:hidden; border-radius:.9rem; aspect-ratio:16/10; background:#150808; border:1px solid rgba(255,255,255,.08); touch-action:pan-y; }
    .g-view::after { content:''; position:absolute; left:0; right:0; bottom:0; height:3rem; background:linear-gradient(transparent,rgba(15,6,6,.55)); pointer-events:none; z-index:2; }
    .g-track { display:flex; height:100%; width:100%; transition:transform .55s cubic-bezier(.4,0,.2,1); will-change:transform; }
    .g-slide { position:relative; flex:0 0 100%; min-width:0; height:100%; }
    .g-slide img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; user-select:none; -webkit-user-drag:none; }
    .g-ph { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.35rem; text-align:center; padding:1rem; border:1.5px dashed rgba(247,148,29,.35); background:rgba(247,148,29,.04); color:rgba(247,148,29,.8); font-size:.75rem; font-weight:600; border-radius:.9rem; }
    .g-ph i { font-size:1.4rem; }
    .g-ph small { font-size:.6rem; font-weight:400; color:rgba(255,255,255,.35); word-break:break-all; }
    .g-btn { position:absolute; top:50%; transform:translateY(-50%); width:2.75rem; height:2.75rem; border-radius:9999px; border:1px solid rgba(255,255,255,.15); background:rgba(15,6,6,.65); backdrop-filter:blur(6px); color:#fff; display:flex; align-items:center; justify-content:center; z-index:3; cursor:pointer; transition:background .2s; }
    .g-btn:hover { background:linear-gradient(135deg,#D72638,#F4500A); }
    .g-prev { left:.4rem; } .g-next { right:.4rem; }
    .g-dots { position:absolute; left:0; right:0; bottom:.3rem; display:flex; justify-content:center; z-index:3; }
    .g-dot { width:1.5rem; height:1.5rem; display:flex; align-items:center; justify-content:center; background:none; border:0; padding:0; cursor:pointer; }
    .g-dot::before { content:''; width:.5rem; height:.5rem; border-radius:9999px; background:rgba(255,255,255,.45); transition:width .25s, background .25s; }
    .g-dot[aria-current="true"]::before { width:1.25rem; background:linear-gradient(90deg,#D72638,#F4500A); }
    .g-count { position:absolute; top:.5rem; right:.5rem; z-index:3; font-size:.65rem; padding:.15rem .55rem; border-radius:9999px; background:rgba(15,6,6,.65); color:rgba(255,255,255,.8); }
    @media (prefers-reduced-motion: reduce) { .g-track { transition:none; } }
    @media (prefers-reduced-motion: reduce) {
      .float-a,.float-b,.float-c,.glow-dot { animation:none; }
      [data-aos] { transition:none; }
      html { scroll-behavior:auto; }
    }

  
/* ── Service pages additions (reuse of homepage system) ── */
.faq-body.open{max-height:700px}
.crumb{font-size:.75rem;color:rgba(255,255,255,.45)}
.crumb a:hover{color:#F7941D}
.prose-p{color:rgba(255,255,255,.6);line-height:1.8;font-size:1rem}
.prose-p a,.inline-link{color:#F7941D;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(247,148,29,.4)}
.prose-p a:hover,.inline-link:hover{color:#fff}
.rel-card{display:block;padding:1.25rem}
.mock-row{display:flex;justify-content:space-between;gap:.75rem;padding:.55rem .75rem;border-radius:.6rem;background:rgba(255,255,255,.04);font-size:.8rem;color:rgba(255,255,255,.75)}
.mock-row b{color:#F7941D;font-weight:600;white-space:nowrap}