/* =====================================================================
   PM TECHNICAL SOFTWARES — v6 ADDITIONS  (pm.css)
   Layered on top of css/style.css. Nothing here overrides core branding;
   it adds the software / SaaS showcase components and — most importantly
   — a proper MOBILE layer (the old CSS had desktop-only assumptions).
   ===================================================================== */

/* ---------------------------------------------------------------------
   0. GLOBAL MOBILE HARDENING
   --------------------------------------------------------------------- */
html{ -webkit-text-size-adjust:100%; }
body{ overflow-x:hidden; max-width:100vw; }
img,svg,video,iframe{ max-width:100%; }
*{ min-width:0; }
.section-pad{ padding:76px 0; }

/* Fluid type helpers used by the new pages */
.h2-fluid{ font-family:var(--font-display); font-size:clamp(26px,4.2vw,44px); line-height:1.12; letter-spacing:-.02em; font-weight:600; }
.p-fluid{ font-size:clamp(14.5px,1.7vw,17px); color:var(--muted); line-height:1.75; }
.eyebrow-2{ display:inline-block; font-size:11px; font-weight:800; letter-spacing:2.4px; text-transform:uppercase; color:var(--bronze); margin-bottom:12px; }

/* Tap targets: every button / nav item comfortable on touch */
button,.btn,.btn-quote,.nav-links a,.drawer a,.faq-q{ min-height:44px; }
@media (hover:none){
  .feat:hover,.p-card:hover,.panel-card:hover{ transform:none !important; }
}

/* ---------------------------------------------------------------------
   1. SOFTWARE SHOWCASE — panel previews
   --------------------------------------------------------------------- */
.panel-showcase{
  display:grid; grid-template-columns:1.55fr 1fr; gap:22px; align-items:stretch;
}
.panel-card{
  position:relative; border-radius:20px; overflow:hidden; cursor:pointer;
  background:var(--card); border:1px solid var(--line2);
  box-shadow:0 18px 44px rgba(74,62,40,.13);
  transition:transform .45s cubic-bezier(.22,.61,.36,1), box-shadow .45s;
}
.panel-card:hover{ transform:translateY(-6px); box-shadow:0 30px 70px rgba(74,62,40,.2); }
.panel-card img{ width:100%; height:100%; object-fit:cover; object-position:top left; display:block; aspect-ratio:16/10; }
.panel-card .pc-tag{
  position:absolute; top:14px; left:14px; z-index:2; font-size:10.5px; font-weight:800; letter-spacing:1.4px;
  text-transform:uppercase; color:var(--bronze); background:rgba(255,253,247,.92);
  border:1px solid var(--line2); border-radius:999px; padding:7px 13px; backdrop-filter:blur(6px);
}
.panel-card .pc-zoom{
  position:absolute; right:14px; bottom:14px; z-index:2; display:flex; align-items:center; gap:7px;
  font-size:11.5px; font-weight:800; color:var(--gold2); background:rgba(43,36,23,.86);
  border:1px solid rgba(201,169,100,.45); border-radius:999px; padding:8px 14px;
}
.panel-card::after{
  content:''; position:absolute; inset:auto 0 0 0; height:38%; pointer-events:none;
  background:linear-gradient(to top, rgba(43,36,23,.16), transparent);
}
.panel-stack{ display:grid; gap:22px; align-content:start; }
.panel-stack .panel-card img{ aspect-ratio:16/10; }

/* mobile carousel (horizontal snap) for panels */
@media(max-width:960px){
  .panel-showcase{ grid-template-columns:1fr; gap:16px; }
  .panel-stack{ grid-template-columns:1fr 1fr; gap:14px; }
}
@media(max-width:640px){
  .panel-stack{
    display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory;
    padding-bottom:8px; -webkit-overflow-scrolling:touch;
  }
  .panel-stack .panel-card{ flex:0 0 84%; scroll-snap-align:center; }
  .panel-card .pc-zoom{ font-size:10.5px; padding:7px 11px; }
  .panel-card .pc-tag{ font-size:9.5px; padding:6px 10px; }
}

/* ---------------------------------------------------------------------
   2. FEATURE / SERVICE GRID (software pages)
   --------------------------------------------------------------------- */
.sw-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.sw-grid.two{ grid-template-columns:repeat(2,1fr); }
.sw-card{
  position:relative; background:var(--card); border:1px solid var(--line); border-radius:18px;
  padding:26px 22px; box-shadow:0 10px 26px rgba(74,62,40,.05); transition:.35s; overflow:hidden;
}
.sw-card:hover{ transform:translateY(-5px); box-shadow:0 22px 50px rgba(74,62,40,.13); border-color:rgba(176,138,69,.4); }
.sw-card .ic{
  width:50px; height:50px; border-radius:14px; display:grid; place-items:center; margin-bottom:16px;
  background:var(--goldlight); border:1px solid rgba(176,138,69,.3); font-size:22px;
}
.sw-card h3{ font-family:var(--font-display); font-size:18px; font-weight:600; margin-bottom:8px; letter-spacing:-.2px; }
.sw-card p{ font-size:13.8px; color:var(--muted); line-height:1.7; }
.sw-card ul{ margin:14px 0 0; padding:0; list-style:none; display:grid; gap:7px; }
.sw-card ul li{ font-size:12.8px; color:var(--muted); display:flex; gap:8px; align-items:flex-start; }
.sw-card ul li::before{ content:'✓'; color:var(--gold); font-weight:800; flex:none; }
@media(max-width:960px){ .sw-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:640px){ .sw-grid,.sw-grid.two{ grid-template-columns:1fr; } }

/* dark band (products / numbers) */
.ink-band{
  background:
    radial-gradient(700px 400px at 88% -10%, rgba(201,169,100,.22), transparent 70%),
    radial-gradient(600px 500px at 0% 110%, rgba(163,72,47,.18), transparent 70%),
    var(--charcoal);
  color:#f4ecda; border-radius:26px; padding:46px 34px; position:relative; overflow:hidden;
}
.ink-band h2,.ink-band h3{ color:#fffdf7; }
.ink-band p{ color:#cfc4ac; }
.ink-band .grad{ color:var(--gold2); }
.ink-band .muted{ color:#a99e86; }
@media(max-width:640px){ .ink-band{ padding:32px 20px; border-radius:20px; } }

/* stack strip */
.stack-strip{ display:flex; flex-wrap:wrap; gap:10px; }
.stack-strip span{
  font-size:12px; font-weight:700; color:var(--bronze); background:var(--card);
  border:1px solid var(--line2); border-radius:999px; padding:8px 15px;
}
@media(max-width:640px){ .stack-strip span{ font-size:11px; padding:7px 12px; } }

/* ---------------------------------------------------------------------
   3. PROCESS / WORKFLOW
   --------------------------------------------------------------------- */
.flow{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; counter-reset:f; }
.flow .step{
  position:relative; background:var(--card); border:1px solid var(--line); border-radius:16px; padding:22px 18px;
}
.flow .step::before{
  counter-increment:f; content:counter(f);
  display:grid; place-items:center; width:34px; height:34px; border-radius:50%;
  background:var(--charcoal); color:var(--gold2); font-weight:800; font-size:14px; margin-bottom:12px;
  font-family:var(--font-body);
}
.flow .step h4{ font-family:var(--font-display); font-size:16px; margin-bottom:6px; }
.flow .step p{ font-size:13px; color:var(--muted); }
@media(max-width:900px){ .flow{ grid-template-columns:1fr 1fr; } }
@media(max-width:560px){ .flow{ grid-template-columns:1fr; } }

/* ---------------------------------------------------------------------
   4. PRICING
   --------------------------------------------------------------------- */
.price-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; align-items:stretch; }
.price-card{
  background:var(--card); border:1px solid var(--line2); border-radius:20px; padding:28px 24px;
  display:flex; flex-direction:column; position:relative; box-shadow:0 12px 30px rgba(74,62,40,.06);
}
.price-card.feat-plan{ background:var(--charcoal); color:#f4ecda; border-color:rgba(201,169,100,.5); box-shadow:0 28px 60px rgba(43,36,23,.3); }
.price-card.feat-plan h3,.price-card.feat-plan .price{ color:#fffdf7; }
.price-card.feat-plan li{ color:#cfc4ac; }
.price-card .ribbon{
  position:absolute; top:-12px; left:50%; transform:translateX(-50%); background:var(--gradbtn); color:#fff;
  font-size:10px; font-weight:800; letter-spacing:1.6px; text-transform:uppercase; padding:6px 16px; border-radius:999px; white-space:nowrap;
}
.price-card h3{ font-family:var(--font-display); font-size:20px; margin-bottom:4px; }
.price-card .for{ font-size:12px; color:var(--soft); margin-bottom:16px; }
.price-card .price{ font-family:var(--font-display); font-size:36px; font-weight:600; line-height:1; letter-spacing:-1px; }
.price-card .price small{ font-size:12.5px; font-family:var(--font-body); color:var(--soft); font-weight:600; letter-spacing:0; }
.price-card ul{ list-style:none; margin:18px 0 22px; padding:0; display:grid; gap:9px; }
.price-card ul li{ font-size:13px; color:var(--muted); display:flex; gap:8px; }
.price-card ul li::before{ content:'✓'; color:var(--gold); font-weight:800; flex:none; }
.price-card .btn{ margin-top:auto; width:100%; }
@media(max-width:900px){ .price-grid{ grid-template-columns:1fr; max-width:520px; margin:0 auto; } }

/* ---------------------------------------------------------------------
   5. VIDEO
   --------------------------------------------------------------------- */
.video-grid{ display:grid; grid-template-columns:1.4fr 1fr; gap:20px; }
.video-card{
  position:relative; border-radius:20px; overflow:hidden; border:1px solid var(--line2);
  background:#000; box-shadow:0 22px 55px rgba(43,36,23,.25); cursor:pointer; aspect-ratio:16/10;
}
.video-card img{ width:100%; height:100%; object-fit:cover; opacity:.86; transition:.5s; }
.video-card:hover img{ transform:scale(1.03); opacity:1; }
.video-card .play{
  position:absolute; inset:0; display:grid; place-items:center;
}
.video-card .play span{
  width:74px; height:74px; border-radius:50%; background:rgba(255,253,247,.92); color:var(--charcoal);
  display:grid; place-items:center; font-size:26px; box-shadow:0 12px 34px rgba(0,0,0,.35); transition:.3s;
}
.video-card:hover .play span{ transform:scale(1.08); }
.video-card .vc-meta{
  position:absolute; left:0; right:0; bottom:0; padding:40px 20px 18px; color:#fff;
  background:linear-gradient(to top, rgba(20,17,12,.9), transparent);
}
.video-card .vc-meta b{ font-family:var(--font-display); font-size:17px; display:block; }
.video-card .vc-meta small{ font-size:11.5px; color:#d8ccb4; }
.video-list{ display:grid; gap:14px; }
.video-list .vc-mini{
  display:flex; gap:14px; align-items:center; background:var(--card); border:1px solid var(--line);
  border-radius:14px; padding:12px; cursor:pointer; transition:.3s;
}
.video-list .vc-mini:hover{ border-color:rgba(176,138,69,.5); transform:translateX(3px); }
.video-list .vc-mini .th{
  width:88px; height:58px; border-radius:10px; background:var(--charcoal); flex:none; display:grid; place-items:center;
  color:var(--gold2); font-size:15px; overflow:hidden;
}
.video-list .vc-mini .th img{ width:100%; height:100%; object-fit:cover; }
.video-list .vc-mini b{ font-size:13.5px; display:block; line-height:1.35; }
.video-list .vc-mini small{ font-size:11px; color:var(--soft); }
@media(max-width:900px){ .video-grid{ grid-template-columns:1fr; } }
@media(max-width:560px){
  .video-card{ aspect-ratio:4/3; }
  .video-card .play span{ width:58px; height:58px; font-size:20px; }
  .video-list .vc-mini .th{ width:74px; height:50px; }
}

/* ---------------------------------------------------------------------
   6. MODAL / LIGHTBOX (panels + video)
   --------------------------------------------------------------------- */
.pm-modal{
  position:fixed; inset:0; z-index:400; background:rgba(20,17,12,.82); backdrop-filter:blur(6px);
  display:none; align-items:center; justify-content:center; padding:20px;
}
.pm-modal.show{ display:flex; }
.pm-modal .box{
  background:var(--bg); border-radius:18px; max-width:1180px; width:100%; max-height:92vh; overflow:auto;
  border:1px solid rgba(201,169,100,.4); box-shadow:0 40px 100px rgba(0,0,0,.5); position:relative;
}
.pm-modal .box img{ width:100%; display:block; border-radius:12px; }
.pm-modal video{ width:100%; display:block; border-radius:12px; background:#000; }
.pm-modal .cap{ padding:14px 20px 18px; font-size:13px; color:var(--muted); }
.pm-modal .cap b{ color:var(--ink); font-family:var(--font-display); font-size:16px; display:block; margin-bottom:3px; }
.pm-modal .x{
  position:absolute; top:12px; right:12px; width:42px; height:42px; border-radius:50%; border:none;
  background:rgba(43,36,23,.85); color:var(--gold2); font-size:18px; z-index:3;
}
@media(max-width:640px){ .pm-modal{ padding:10px; } .pm-modal .box{ border-radius:14px; } }

/* ---------------------------------------------------------------------
   7. CTA BAND / QUOTE STRIP
   --------------------------------------------------------------------- */
.cta-flex{ display:flex; align-items:center; justify-content:space-between; gap:26px; flex-wrap:wrap; }
.cta-flex .ctas{ display:flex; gap:12px; flex-wrap:wrap; }
.btn-wa{ background:#128c7e; color:#fff; }
.btn-wa:hover{ background:#0e7468; }
.btn-gold{ background:var(--gradbtn); color:#2b2417; font-weight:800; }
.btn-gold:hover{ filter:brightness(1.06); }
@media(max-width:640px){
  .cta-flex{ text-align:center; justify-content:center; }
  .cta-flex .ctas{ width:100%; }
  .cta-flex .ctas .btn{ flex:1 1 100%; }
}

/* ---------------------------------------------------------------------
   8. TABLES / LISTS that must scroll on mobile
   --------------------------------------------------------------------- */
.scroll-x{ overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:14px; }
.scroll-x table{ min-width:640px; }
.cmp-table{ width:100%; border-collapse:collapse; background:var(--card); border-radius:14px; overflow:hidden; }
.cmp-table th,.cmp-table td{ padding:14px 16px; font-size:13.5px; text-align:left; border-bottom:1px solid var(--line); }
.cmp-table th{ background:var(--card2); font-size:11px; letter-spacing:1.4px; text-transform:uppercase; color:var(--soft); }
.cmp-table td:first-child{ font-weight:700; }
.cmp-table .yes{ color:#0f8a5f; font-weight:800; }
.cmp-table .no{ color:#a3482f; font-weight:800; }

/* ---------------------------------------------------------------------
   9. HEADER / NAV — mobile fixes for the injected header
   --------------------------------------------------------------------- */
@media(max-width:900px){
  .navbar{ height:64px !important; gap:10px; }
  .brand .logo{ width:40px !important; height:40px !important; font-size:16px !important; }
  .brand .txt h1{ font-size:15.5px !important; white-space:normal !important; line-height:1.1; }
  .brand .txt span{ font-size:9px !important; letter-spacing:1.1px; }
}
@media(max-width:520px){
  .brand .txt span{ display:none; }
  .brand .txt h1{ font-size:14px !important; max-width:150px; }
  .container{ padding:0 16px !important; }
  .announce{ font-size:11px !important; padding:8px 10px !important; line-height:1.5; }
  .announce .sep{ margin:0 5px; }
  .hdr-tools .install-btn{ display:none !important; }
  .nav-cta .tool-btn{ width:34px !important; height:34px !important; font-size:13px; }
  .hamburger{ width:42px !important; height:42px !important; }
}
@media(max-width:390px){
  .brand .txt h1{ font-size:12.5px !important; max-width:118px; }
}

/* stop the mobile sticky bar from covering content / the WhatsApp bubble */
@media(max-width:760px){
  body{ padding-bottom:78px !important; }
  .sticky-cta{ z-index:105; }
  .wa-toggle{ bottom:96px !important; right:14px !important; z-index:106; }
  .wa-panel{ bottom:166px !important; right:14px !important; left:14px !important; width:auto !important; z-index:106; }
  .totop{ bottom:104px !important; left:14px !important; width:44px !important; height:44px !important; }
  .toast{ bottom:150px !important; left:14px !important; right:14px !important; transform:none !important; }
  .toast.show{ transform:none !important; }
  .live-counter{ bottom:150px !important; }
}

/* iOS safe area */
@supports(padding:max(0px)){
  .sticky-cta{ padding-bottom:max(8px, env(safe-area-inset-bottom)); }
}

/* ---------------------------------------------------------------------
   10. MISC UTILITIES
   --------------------------------------------------------------------- */
.badge-soft{ display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:800; letter-spacing:.6px;
  text-transform:uppercase; color:var(--bronze); background:var(--goldlight); border:1px solid rgba(176,138,69,.35);
  border-radius:999px; padding:6px 12px; }
.dot-live{ width:7px; height:7px; border-radius:50%; background:#0f8a5f; box-shadow:0 0 0 3px rgba(15,138,95,.18); animation:pulseDot 1.8s infinite; }
@keyframes pulseDot{ 0%,100%{ opacity:1 } 50%{ opacity:.45 } }
.text-center{ text-align:center; }
.mx-auto{ margin-left:auto; margin-right:auto; }
.maxw-720{ max-width:720px; }
.mb-0{ margin-bottom:0; } .mb-8{ margin-bottom:8px; } .mb-16{ margin-bottom:16px; } .mb-24{ margin-bottom:24px; } .mb-36{ margin-bottom:36px; }
.mt-16{ margin-top:16px; } .mt-24{ margin-top:24px; } .mt-36{ margin-top:36px; }
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
@media(max-width:800px){ .grid-2{ grid-template-columns:1fr; } }
.checklist{ list-style:none; padding:0; display:grid; gap:10px; }
.checklist li{ display:flex; gap:10px; font-size:14px; color:var(--muted); align-items:flex-start; }
.checklist li b{ color:var(--ink); }
.checklist li::before{ content:'✦'; color:var(--gold); flex:none; font-weight:700; }

/* form success / error state */
.form-note{ font-size:12.5px; padding:10px 14px; border-radius:10px; display:none; margin-top:10px; }
.form-note.ok{ display:block; background:#e8f5ee; color:#0f8a5f; border:1px solid #b9e4d0; }
.form-note.err{ display:block; background:#fdece5; color:#a3482f; border:1px solid #f2c9ba; }

/* print — clean client reports */
@media print{
  .site-header,.site-footer,.sticky-cta,.wa-toggle,.wa-panel,.totop,.side-quote,.announce,.festive{ display:none !important; }
  body{ background:#fff; padding:0 !important; }
}


/* ---------------------------------------------------------------------
   11. v6.1 — small fixes found while testing on mobile
   --------------------------------------------------------------------- */
/* drawer close button was white-on-white */
.drawer .iconbtn{ color:var(--ink) !important; background:var(--card2) !important; }

/* festive banner + announce must never push the navbar off-screen */
.festive{ flex-wrap:wrap; }
.festive .fb-txt{ white-space:normal; }

/* WhatsApp chat panel: never taller than the screen */
.wa-panel{ max-height:min(560px, 72vh); overflow:auto; }
@media(max-width:760px){ .wa-panel{ max-height:66vh; } }

/* blog / portfolio cards on small phones */
@media(max-width:480px){
  .b-card, .p-card, .review{ border-radius:14px; }
  .sec-head h2{ font-size:clamp(22px,6.4vw,30px) !important; }
  .page-hero h1{ font-size:clamp(26px,7.6vw,36px) !important; }
  .ticker span{ font-size:12px; }
  .stats{ gap:10px; }
  .stat{ padding:14px 10px; }
}

/* long words / emails must wrap */
.rep b, .doc b, .msg-list .it b{ overflow-wrap:anywhere; }

/* focus ring for accessibility */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline:2px solid var(--gold); outline-offset:2px;
}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

/* ---- inline notices (used on checkout / landings) ---- */
.greenbox{background:#eef7ef;border:1px solid #cfe6d4;border-radius:11px;padding:12px 14px;color:#245c38}
.warnbox{background:#fdf1d9;border:1px solid #f0d9a8;border-radius:11px;padding:12px 14px;color:#7a5510}