/* ──────────────────────────────────────────────────────────────────────
 *  WHIZTEC product page — shared stylesheet
 *  Used by /products/whizcargo, /products/whizmarine, /products/whizerp,
 *  /products/whizai. Each page sets --accent-* CSS variables to tint
 *  the orange-by-default brand to product-specific accents.
 * ────────────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; font-size:16px; scroll-padding-top:80px; }
body { font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
       background:var(--bg); color:var(--text); font-size:15px; line-height:1.7; -webkit-font-smoothing:antialiased; }

:root {
  --bg:#FFFFFF; --bg2:#F4F7FB; --bg3:#EBF0F7;
  --text:#0A2540; --muted:rgba(10,37,64,.62); --border:rgba(10,37,64,.1);
  --orange:#FF6B00; --blue:#0074C8; --teal:#00D4AA; --purple:#8B5CF6; --green:#22C55E;
  --serif:'Playfair Display', Georgia, serif;
  --accent:var(--orange);          /* product page tints this */
  --accent-soft:rgba(255,107,0,.08);
  --accent-border:rgba(255,107,0,.3);
}
[data-theme="dark"] {
  --bg:#0F172A; --bg2:#162033; --bg3:#0A1228;
  --text:#F0F4FA; --muted:rgba(240,244,250,.55); --border:rgba(255,255,255,.08);
}
[data-theme="grey"] {
  --bg:#1C2228; --bg2:#242B33; --bg3:#14181F;
  --text:#DDE4EE; --muted:rgba(221,228,238,.55); --border:rgba(255,255,255,.09);
}
[data-theme="dark"] .site-nav,
[data-theme="grey"] .site-nav { background:rgba(15,23,42,.92); border-bottom-color:rgba(255,255,255,.06); }
[data-theme="dark"] .nav-logo .tec,
[data-theme="grey"] .nav-logo .tec { color:#fff; }
[data-theme="dark"] .nav-logo-desc,
[data-theme="grey"] .nav-logo-desc { color:rgba(255,255,255,.4); }
[data-theme="dark"] .nav-center > a,
[data-theme="grey"] .nav-center > a,
[data-theme="dark"] .nav-dropdown-btn,
[data-theme="grey"] .nav-dropdown-btn { color:rgba(255,255,255,.72); }
[data-theme="dark"] .nav-center > a:hover,
[data-theme="grey"] .nav-center > a:hover { color:#fff; }
[data-theme="dark"] .nav-dropdown,
[data-theme="grey"] .nav-dropdown { background:#080f1e; border-color:rgba(255,255,255,.1); }
[data-theme="dark"] .nav-dropdown a,
[data-theme="grey"] .nav-dropdown a { color:rgba(255,255,255,.65); }
[data-theme="dark"] .nav-dropdown a:hover,
[data-theme="grey"] .nav-dropdown a:hover { background:rgba(255,255,255,.06); color:#fff; }
[data-theme="dark"] .lang-btn,
[data-theme="grey"] .lang-btn,
[data-theme="dark"] .theme-toggle,
[data-theme="grey"] .theme-toggle { background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.12); color:rgba(255,255,255,.7); }
[data-theme="dark"] .lang-dropdown,
[data-theme="grey"] .lang-dropdown { background:#080f1e; border-color:rgba(255,255,255,.1); }
[data-theme="dark"] .lang-option,
[data-theme="grey"] .lang-option { color:rgba(255,255,255,.7); }
[data-theme="dark"] .pp-mod-group,
[data-theme="grey"] .pp-mod-group,
[data-theme="dark"] .pp-usecase,
[data-theme="grey"] .pp-usecase,
[data-theme="dark"] .pp-faq-item,
[data-theme="grey"] .pp-faq-item,
[data-theme="dark"] .pp-int,
[data-theme="grey"] .pp-int { background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.08); }
[data-theme="dark"] .pp-mod-list span,
[data-theme="grey"] .pp-mod-list span { background:rgba(255,255,255,.06); color:rgba(255,255,255,.78); }
[data-theme="dark"] .pp-cap-list li,
[data-theme="grey"] .pp-cap-list li { border-bottom-color:rgba(255,255,255,.06); }

a { color:var(--blue); text-decoration:none; transition:color .15s; }
a:hover { color:var(--orange); }
img { max-width:100%; height:auto; display:block; }

/* ── NAV (mirrors home page .site-nav) ─────────────────────────────── */
.site-nav { position:sticky; top:0; z-index:100; padding:.95rem clamp(1rem,3vw,2rem); display:flex; align-items:center; gap:2rem; background:rgba(255,255,255,.95); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom:1px solid var(--border); transition:background .25s, box-shadow .25s; }
.site-nav.scrolled { background:rgba(255,255,255,.98); box-shadow:0 1px 0 rgba(15,23,42,.08); }

.nav-logo { font-size:1.78rem; font-weight:800; font-family:'Raleway',system-ui,sans-serif; letter-spacing:.04em; line-height:1; display:flex; flex-direction:column; gap:0; text-decoration:none; flex-shrink:0; }
.nav-logo .whiz { color:#FF6B2B; }
.nav-logo .tec  { color:var(--text); }
.logo-w { font-weight:800; }
.nav-logo-desc { font-size:.44rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:rgba(10,37,64,.38); margin-top:.22rem; line-height:1; font-family:system-ui,sans-serif; }

.nav-center { display:flex; align-items:center; gap:0; flex:1; justify-content:center; flex-wrap:wrap; row-gap:4px; }
.nav-center > a { position:relative; font-size:14px; font-weight:500; letter-spacing:-.01em; color:rgba(10,37,64,.7); transition:color .2s, transform .2s; white-space:nowrap; line-height:1; text-decoration:none; display:inline-flex; align-items:center; gap:.4rem; padding:0 14px; }
.nav-center > a:hover { color:var(--text); transform:translateY(-1px); }
.nav-center > a > i { font-size:.78rem; color:var(--orange); opacity:.85; transition:opacity .2s; }
.nav-center > a:hover > i { opacity:1; }
.nav-center > a.active { color:var(--orange); }
.nav-center > a.active > i { color:var(--orange); opacity:1; }
.nav-center > a:not(:last-child)::after { content:''; position:absolute; right:0; top:50%; transform:translateY(-50%); width:1px; height:18px; background:rgba(10,37,64,.15); }
[data-theme="dark"] .nav-center > a:not(:last-child)::after,
[data-theme="grey"] .nav-center > a:not(:last-child)::after { background:rgba(255,255,255,.15); }
/* Product wordmark in nav — matches WHIZTEC logo W glyph */
.nav-product .brand { display:inline-flex; align-items:baseline; font-family:'Raleway',system-ui,sans-serif; font-weight:800; letter-spacing:.04em; }
.nav-product .brand .whiz { color:var(--orange); }
.nav-product .brand .suffix { color:rgba(10,37,64,.7); }
[data-theme="dark"] .nav-product .brand .suffix,
[data-theme="grey"] .nav-product .brand .suffix { color:rgba(255,255,255,.78); }
/* Generic brand mark — usable inline (e.g., "Why WHIZTEC") */
.brand-mark { display:inline-flex; align-items:baseline; font-family:'Raleway',system-ui,sans-serif; font-weight:800; letter-spacing:.04em; }
.brand-mark .whiz { color:var(--orange); }
.brand-mark .tec { color:inherit; }

.nav-right { display:flex; align-items:center; gap:.55rem; flex-shrink:0; }

.lang-switcher { position:relative; }
.lang-btn { background:rgba(10,37,64,.05); border:1px solid rgba(10,37,64,.1); cursor:pointer; font-family:inherit; font-size:.78rem; font-weight:700; color:rgba(10,37,64,.7); padding:.45rem .7rem; border-radius:8px; display:inline-flex; align-items:center; gap:.4rem; transition:background .15s, color .15s; }
.lang-btn:hover { background:rgba(10,37,64,.1); color:var(--text); }
.lang-chevron { font-size:.6rem; opacity:.7; transition:transform .2s; }
.lang-switcher.open .lang-chevron { transform:rotate(180deg); }
.lang-dropdown { position:absolute; top:calc(100% + 8px); right:0; background:#fff; border:1px solid rgba(15,23,42,.1); border-radius:10px; min-width:170px; padding:.35rem 0; opacity:0; pointer-events:none; transform:translateY(-6px); transition:opacity .18s, transform .18s; z-index:200; box-shadow:0 12px 36px rgba(15,23,42,.12); }
.lang-switcher.open .lang-dropdown { opacity:1; pointer-events:all; transform:translateY(0); }
.lang-option { display:flex; align-items:center; gap:.6rem; padding:.5rem .85rem; font-size:.82rem; color:rgba(10,37,64,.72); text-decoration:none; }
.lang-option:hover { background:rgba(15,23,42,.04); color:var(--text); }
.lang-option.active { color:var(--orange); font-weight:700; }

.theme-toggle { background:rgba(10,37,64,.05); border:1px solid rgba(10,37,64,.1); width:34px; height:34px; border-radius:8px; cursor:pointer; color:rgba(10,37,64,.65); display:flex; align-items:center; justify-content:center; transition:background .15s, color .15s; font-size:.9rem; }
.theme-toggle:hover { background:rgba(10,37,64,.1); color:var(--text); }

.nav-cta { background:#FF6B00; color:#fff !important; padding:.5rem 1.1rem; border-radius:9px; font-size:.82rem; font-weight:800; letter-spacing:.02em; transition:background .2s, transform .15s, box-shadow .2s; white-space:nowrap; box-shadow:0 4px 16px rgba(255,107,0,.3); text-decoration:none; }
.nav-cta:hover { background:#E65F00; color:#fff !important; transform:translateY(-1px); box-shadow:0 8px 24px rgba(255,107,0,.4); }

.nav-hamburger { display:none; background:transparent; border:1px solid rgba(10,37,64,.15); width:38px; height:38px; border-radius:8px; cursor:pointer; color:var(--text); align-items:center; justify-content:center; font-size:.95rem; }
.nav-hamburger:hover { background:rgba(10,37,64,.05); }

/* Mobile drawer */
.mobile-nav { position:fixed; top:0; right:0; bottom:0; width:280px; background:#fff; border-left:1px solid var(--border); display:flex; flex-direction:column; gap:.6rem; padding:4rem 1.4rem 2rem; transform:translateX(100%); transition:transform .25s; z-index:300; box-shadow:-16px 0 48px rgba(10,37,64,.12); }
.mobile-nav.open { transform:translateX(0); }
.mobile-nav a { font-size:1rem; font-weight:600; color:var(--text); padding:.4rem .25rem; text-decoration:none; }
.mobile-nav a:hover { color:var(--orange); }
.mobile-nav-close { position:absolute; top:1rem; right:1rem; background:transparent; border:none; cursor:pointer; font-size:1.1rem; color:rgba(10,37,64,.6); }

@media (max-width:1000px) {
  .nav-center { display:none; }
  .nav-right .nav-cta { display:none; }
  .nav-hamburger { display:flex; }
}

/* ── HERO ──────────────────────────────────────────────────────────── */
.pp-hero { position:relative; padding:5rem 1.4rem 5rem; background:linear-gradient(160deg, #FFFFFF 0%, var(--accent-soft) 100%); overflow:hidden; }
.pp-hero-inner { max-width:1200px; margin:0 auto; display:grid; grid-template-columns:1.2fr 1fr; gap:3rem; align-items:center; }
.pp-eyebrow { display:inline-flex; align-items:center; gap:.5rem; font-size:.65rem; font-weight:800; letter-spacing:.2em; text-transform:uppercase; color:var(--accent); background:var(--accent-soft); border:1px solid var(--accent-border); padding:.35rem .85rem; border-radius:100px; margin-bottom:1.2rem; }
.pp-eyebrow .dot { width:6px; height:6px; border-radius:50%; background:var(--accent); }
.pp-h1 { font-size:clamp(2rem,4.5vw,3.6rem); font-weight:900; letter-spacing:-.03em; line-height:1.05; margin-bottom:1.2rem; }
.pp-h1 .whiz { color:var(--orange); font-family:'Raleway',system-ui,sans-serif; font-weight:800; letter-spacing:.04em; }
.pp-h1 .suffix { font-family:'Raleway',system-ui,sans-serif; font-weight:800; letter-spacing:.04em; color:var(--text); }
.pp-h1 .whiz .logo-w,
.pp-h2 .whiz .logo-w { font-weight:800; }
.pp-lede { font-size:1.05rem; color:var(--muted); line-height:1.75; max-width:560px; margin-bottom:1.8rem; }
.pp-hero-actions { display:flex; gap:.7rem; flex-wrap:wrap; }
.pp-btn { display:inline-flex; align-items:center; gap:.5rem; padding:.8rem 1.4rem; font-weight:700; font-size:.92rem; border-radius:10px; transition:transform .15s, box-shadow .15s, background .15s; }
.pp-btn-primary { background:var(--orange); color:#fff; box-shadow:0 8px 24px rgba(255,107,0,.3); }
.pp-btn-primary:hover { background:#E65F00; color:#fff; transform:translateY(-2px); box-shadow:0 12px 32px rgba(255,107,0,.4); }
.pp-btn-ghost { background:transparent; color:var(--text); border:1.5px solid rgba(10,37,64,.2); }
.pp-btn-ghost:hover { background:rgba(10,37,64,.04); border-color:var(--text); color:var(--text); }
.pp-hero-visual { background:#0A2540; border-radius:18px; padding:2rem 1.6rem; color:#fff; box-shadow:0 20px 60px rgba(10,37,64,.18); }
.pp-hero-visual-title { font-size:.65rem; font-weight:800; letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.5); margin-bottom:1.2rem; }
.pp-hero-stats { display:grid; grid-template-columns:1fr 1fr; gap:1.4rem; }
.pp-hero-stat .n { font-size:2.2rem; font-weight:900; color:var(--accent); letter-spacing:-.02em; line-height:1; }
.pp-hero-stat .l { font-size:.74rem; font-weight:700; color:rgba(255,255,255,.6); letter-spacing:.06em; text-transform:uppercase; margin-top:.4rem; }

/* ── SECTIONS ──────────────────────────────────────────────────────── */
.pp-section { padding:4.5rem 1.4rem; }
.pp-section-bg2 { background:var(--bg2); }
.pp-container { max-width:1200px; margin:0 auto; }
.pp-section-head { text-align:center; max-width:760px; margin:0 auto 3rem; }
.pp-eyebrow-center { display:inline-flex; align-items:center; gap:.4rem; font-size:.62rem; font-weight:800; letter-spacing:.2em; text-transform:uppercase; color:var(--accent); margin-bottom:.8rem; }
.pp-eyebrow-center::before { content:''; width:24px; height:2px; background:var(--accent); }
.pp-h2 { font-size:clamp(1.6rem,3vw,2.4rem); font-weight:900; letter-spacing:-.02em; line-height:1.15; margin-bottom:1rem; }
.pp-h2 .hl { color:var(--accent); }
.pp-h2 .whiz   { font-family:'Raleway','Arial Black',sans-serif; font-weight:800; letter-spacing:.02em; color:var(--orange); }
.pp-h2 .suffix { font-family:'Raleway','Arial Black',sans-serif; font-weight:800; letter-spacing:.02em; color:var(--text); }
.pp-section-sub { font-size:1rem; color:var(--muted); line-height:1.75; max-width:640px; margin:0 auto; }

/* Module grid */
.pp-modules { display:grid; grid-template-columns:repeat(2,1fr); gap:1.2rem; margin-top:2rem; }
.pp-mod-group { background:#fff; border:1px solid var(--border); border-radius:14px; padding:1.4rem 1.5rem; transition:border-color .25s, transform .2s, box-shadow .25s; }
.pp-mod-group:hover { border-color:var(--accent-border); transform:translateY(-3px); box-shadow:0 12px 32px rgba(10,37,64,.06); }
.pp-mod-group-icon { width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:1.1rem; background:var(--accent-soft); color:var(--accent); margin-bottom:1rem; }
.pp-mod-group-title { font-size:1.05rem; font-weight:800; margin-bottom:.4rem; }
.pp-mod-group-sub { font-size:.82rem; color:var(--muted); margin-bottom:1rem; }
.pp-mod-list { display:flex; flex-wrap:wrap; gap:.4rem; }
.pp-mod-list span { font-size:.72rem; font-weight:600; padding:.25rem .65rem; background:var(--bg2); border-radius:100px; color:rgba(10,37,64,.7); }

/* Use cases grid */
.pp-usecases { display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem; margin-top:2rem; }
.pp-usecase { background:#fff; border:1px solid var(--border); border-radius:14px; padding:1.4rem; display:flex; flex-direction:column; gap:.55rem; transition:border-color .2s, transform .2s; }
.pp-usecase:hover { border-color:var(--accent-border); transform:translateY(-2px); }
.pp-usecase-icon { width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:.95rem; background:var(--accent-soft); color:var(--accent); margin-bottom:.4rem; }
.pp-usecase-title { font-size:.95rem; font-weight:800; }
.pp-usecase-body { font-size:.82rem; color:var(--muted); line-height:1.6; }

/* Capability rows (alternating left/right) */
.pp-capability { display:grid; grid-template-columns:1fr 1fr; gap:3.5rem; align-items:center; margin-bottom:4rem; }
.pp-capability:last-child { margin-bottom:0; }
.pp-capability:nth-child(even) .pp-cap-text { order:2; }
.pp-cap-eyebrow { font-size:.66rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); margin-bottom:.7rem; }
.pp-cap-title { font-size:1.7rem; font-weight:900; letter-spacing:-.015em; line-height:1.2; margin-bottom:.9rem; }
.pp-cap-body { font-size:.98rem; color:var(--muted); line-height:1.75; margin-bottom:1.1rem; }
.pp-cap-list { list-style:none; padding:0; margin-top:1rem; }
.pp-cap-list li { font-size:.92rem; color:var(--text); padding:.45rem 0 .45rem 1.7rem; position:relative; border-bottom:1px solid var(--border); }
.pp-cap-list li:last-child { border-bottom:none; }
.pp-cap-list li::before { content:'\f00c'; font-family:'Font Awesome 6 Free'; font-weight:900; color:var(--accent); position:absolute; left:0; top:.5rem; font-size:.85rem; }
.pp-cap-visual { background:#0A2540; border-radius:18px; padding:1.8rem; color:#fff; min-height:280px; display:flex; align-items:center; justify-content:center; }
.pp-cap-visual-inner { width:100%; }

/* Integration chips */
.pp-int-grid { display:flex; flex-wrap:wrap; gap:.55rem; justify-content:center; margin-top:1.8rem; }
.pp-int { font-size:.82rem; font-weight:700; padding:.5rem 1rem; background:#fff; border:1.5px solid var(--border); border-radius:100px; color:var(--text); }

/* FAQ */
.pp-faq-list { max-width:880px; margin:2rem auto 0; display:flex; flex-direction:column; gap:.7rem; }
.pp-faq-item { background:#fff; border:1px solid var(--border); border-radius:12px; overflow:hidden; transition:border-color .2s; }
.pp-faq-item:hover, .pp-faq-item[open] { border-color:var(--accent-border); }
.pp-faq-item summary { cursor:pointer; padding:1rem 1.2rem; font-size:.95rem; font-weight:700; display:flex; align-items:center; justify-content:space-between; gap:1rem; list-style:none; }
.pp-faq-item summary::-webkit-details-marker { display:none; }
.pp-faq-chev { color:var(--accent); transition:transform .25s; flex-shrink:0; font-size:.78rem; }
.pp-faq-item[open] .pp-faq-chev { transform:rotate(180deg); }
.pp-faq-body { padding:0 1.2rem 1.1rem; font-size:.88rem; color:var(--muted); line-height:1.7; }
.pp-faq-body strong { color:var(--text); }

/* CTA band */
.pp-cta-band { background:linear-gradient(135deg, #0A2540 0%, #06101F 100%); color:#fff; padding:4rem 1.4rem; text-align:center; }
.pp-cta-band h2 { font-size:clamp(1.8rem,3.5vw,2.6rem); font-weight:900; letter-spacing:-.02em; margin-bottom:1rem; }
.pp-cta-band h2 .hl { color:var(--accent); }
.pp-cta-band p { color:rgba(255,255,255,.7); font-size:1rem; max-width:580px; margin:0 auto 1.6rem; }
.pp-cta-band .pp-hero-actions { justify-content:center; }
.pp-cta-band .pp-btn-ghost { background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.25); color:#fff; }
.pp-cta-band .pp-btn-ghost:hover { background:rgba(255,255,255,.12); border-color:#fff; color:#fff; }

/* Breadcrumb */
.pp-breadcrumb { max-width:1200px; margin:0 auto; padding:1rem 1.4rem 0; font-size:.78rem; color:var(--muted); }
.pp-breadcrumb a { color:var(--muted); }
.pp-breadcrumb a:hover { color:var(--accent); }
.pp-breadcrumb .sep { margin:0 .55rem; opacity:.5; }

/* Footer (simpler than home) */
.pp-footer { background:var(--bg3); border-top:1px solid var(--border); padding:3rem 1.4rem 2rem; }
.pp-footer-inner { max-width:1200px; margin:0 auto; display:grid; grid-template-columns:1fr 2fr; gap:3rem; align-items:start; }
.pp-footer-brand .logo { font-family:'Raleway',sans-serif; font-weight:800; letter-spacing:.04em; font-size:1.5rem; margin-bottom:.4rem; }
.pp-footer-brand .logo .whiz { color:#FF6B2B; }
.pp-footer-brand .tagline { font-size:.78rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--orange); margin-bottom:.6rem; }
.pp-footer-brand p { font-size:.82rem; color:var(--muted); line-height:1.65; }
.pp-footer-cols { display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; }
.pp-footer-col h4 { font-size:.65rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:rgba(10,37,64,.45); margin-bottom:.9rem; }
.pp-footer-col a { display:block; font-size:.85rem; color:rgba(10,37,64,.7); margin-bottom:.45rem; }
.pp-footer-col a:hover { color:var(--orange); }
.pp-footer-bottom { max-width:1200px; margin:2rem auto 0; padding-top:1.4rem; border-top:1px solid var(--border); display:flex; justify-content:space-between; flex-wrap:wrap; gap:.8rem; font-size:.78rem; color:rgba(10,37,64,.55); }
.pp-footer-bottom a { color:rgba(10,37,64,.55); }

/* Responsive */
@media (max-width:980px) {
  .pp-hero-inner { grid-template-columns:1fr; }
  .pp-hero-visual { order:2; }
  .pp-modules { grid-template-columns:1fr; }
  .pp-usecases { grid-template-columns:repeat(2,1fr); }
  .pp-capability { grid-template-columns:1fr; gap:1.5rem; margin-bottom:3rem; }
  .pp-capability:nth-child(even) .pp-cap-text { order:0; }
  .pp-footer-inner { grid-template-columns:1fr; gap:2rem; }
}
@media (max-width:680px) {
  .pp-usecases { grid-template-columns:1fr; }
  .pp-footer-cols { grid-template-columns:1fr 1fr; }
}