/*
Theme Name: Xipheredge Technologies
Theme URI: https://xipheredge.com
Author: Xipheredge Technologies
Author URI: https://xipheredge.com
Description: Custom WordPress theme for Xipheredge Technologies — access control, AI biometric authentication, video security and smart sensors. Enterprise product catalogue with specification tables, solution and industry pages, customer stories, a download centre and an enquiry pipeline. Deep navy and emerald brand system.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: xipheredge
*/

/* ============================================================
   DESIGN TOKENS — brand colours live here
   Navy #142D46 (hover #072A42) · Emerald #0CC28F (hover #0D9E71)
   ============================================================ */
:root{
  --ink:          #142d46;   /* brand navy — headings, dark sections */
  --ink-hover:    #072a42;   /* navy hover / pressed */
  --ink-2:        #0e2237;   /* deeper navy for gradients */
  --ink-3:        #1d3d5e;   /* raised surface on navy */
  --ink-4:        #2a5480;   /* borders on navy */

  --accent:       #0cc28f;   /* brand emerald — CTAs, highlights */
  --accent-hover: #0d9e71;   /* emerald hover / pressed */
  --accent-soft:  #e6faf4;   /* tinted band */
  --accent-line:  rgba(12,194,143,.35);
  --accent-tint:  rgba(12,194,143,.12);

  --paper:        #ffffff;
  --paper-2:      #f4f7f9;   /* neutral section band */
  --paper-3:      #e9eef3;
  --muted:        #55677a;   /* body text */
  --muted-2:      #8496a8;
  --line:         rgba(20,45,70,.12);
  --line-2:       rgba(255,255,255,.14);

  --font-head: 'Manrope', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Inter', 'Segoe UI', system-ui, sans-serif;

  --wrap: 1240px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-pill: 999px;

  --shadow-sm: 0 2px 10px rgba(20,45,70,.06);
  --shadow-md: 0 12px 34px rgba(20,45,70,.10);
  --shadow-lg: 0 26px 64px rgba(20,45,70,.16);

  --header-h: 76px;
}

/* ============================================================
   BASE
   ============================================================ */
*,*::before,*::after{ box-sizing:border-box }
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--head-h, var(--header-h)) + 20px);
}
body{
  margin:0;
  font-family:var(--font-body);
  font-size:16.5px;
  line-height:1.7;
  color:var(--muted);
  background:var(--paper);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
body.nav-open{ overflow:hidden }

h1,h2,h3,h4,h5,h6{
  font-family:var(--font-head);
  color:var(--ink);
  margin:0 0 .5em;
  line-height:1.15;
  letter-spacing:-.02em;
  font-weight:800;
}
h1{ font-size:clamp(2.25rem,4.6vw,3.6rem) }
h2{ font-size:clamp(1.8rem,3.2vw,2.6rem) }
h3{ font-size:clamp(1.15rem,1.8vw,1.45rem) }
h4{ font-size:1.02rem }
p{ margin:0 0 1.1em }
a{ color:var(--ink); text-decoration:none; transition:color .18s ease }
a:hover{ color:var(--accent-hover) }
img{ max-width:100%; height:auto; display:block }
ul,ol{ margin:0 0 1.1em; padding-left:1.15em }
svg{ width:20px; height:20px; flex:none }
button{ font:inherit; cursor:pointer }
:focus-visible{ outline:3px solid var(--accent); outline-offset:2px; border-radius:3px }
hr{ border:0; border-top:1px solid var(--line); margin:40px 0 }

.screen-reader-text{
  position:absolute!important; width:1px; height:1px; overflow:hidden;
  clip:rect(1px,1px,1px,1px); white-space:nowrap;
}
.skip-link:focus{
  position:fixed; top:10px; left:10px; z-index:9999; width:auto; height:auto;
  clip:auto; background:var(--ink); color:#fff; padding:10px 18px; border-radius:var(--r-sm);
}

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:24px; min-width:0 }
.section{ padding:96px 0 }
.section--tight{ padding:60px 0 }
.bg-paper2{ background:var(--paper-2) }
.bg-soft{ background:var(--accent-soft) }
.bg-ink{ background:var(--ink); color:rgba(255,255,255,.78) }
.bg-ink h1,.bg-ink h2,.bg-ink h3,.bg-ink h4{ color:#fff }
.bg-ink a{ color:#fff }
.bg-ink a:hover{ color:var(--accent) }
.text-center{ text-align:center }
.accent{ color:var(--accent) }

/* ============================================================
   TYPE HELPERS
   ============================================================ */
.eyebrow{
  display:inline-block; font-family:var(--font-head); font-weight:700;
  font-size:.74rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent-hover); margin-bottom:14px;
}
.eyebrow--light{ color:var(--accent) }
.h-sec{ margin-bottom:.4em }
.lead{ font-size:1.08rem; max-width:62ch; color:var(--muted) }
.bg-ink .lead{ color:rgba(255,255,255,.72) }
.section-head{ margin-bottom:46px }
.section-head.text-center{ margin-inline:auto; max-width:760px }
.section-head.text-center .lead{ margin-inline:auto }

.sec-head-row{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:28px; flex-wrap:wrap; margin-bottom:42px;
}
.sec-head-row .section-head{ margin-bottom:0 }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--font-head); font-weight:700; font-size:.95rem;
  padding:13px 24px; border-radius:var(--r-sm); border:1.5px solid transparent;
  transition:background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
  cursor:pointer; text-align:left;
}
.btn svg{ width:18px; height:18px }
.btn--accent{ background:var(--accent); color:#04241a; border-color:var(--accent) }
.btn--accent:hover{ background:var(--accent-hover); border-color:var(--accent-hover); color:#fff }
.btn--ink{ background:var(--ink); color:#fff; border-color:var(--ink) }
.btn--ink:hover{ background:var(--ink-hover); border-color:var(--ink-hover); color:#fff }
.btn--ghost{ background:transparent; color:var(--ink); border-color:var(--line) }
.btn--ghost:hover{ background:var(--ink); border-color:var(--ink); color:#fff }
.bg-ink .btn--ghost,.hero .btn--ghost,.page-hero .btn--ghost,.cta-band .btn--ghost,.pf-visual .btn--ghost{
  color:#fff; border-color:var(--line-2);
}
.bg-ink .btn--ghost:hover,.hero .btn--ghost:hover,.page-hero .btn--ghost:hover,.cta-band .btn--ghost:hover,.pf-visual .btn--ghost:hover{
  background:#fff; color:var(--ink); border-color:#fff;
}
.btn--sm{ padding:9px 16px; font-size:.86rem }

.link-arrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-head); font-weight:700; font-size:.92rem; color:var(--accent-hover);
}
.link-arrow svg{ width:17px; height:17px; transition:transform .18s ease }
.link-arrow:hover{ color:var(--ink-hover) }
.link-arrow:hover svg{ transform:translateX(4px) }
.bg-ink .link-arrow{ color:var(--accent) }
.bg-ink .link-arrow:hover{ color:#fff }

/* ============================================================
   HEADER
   ============================================================ */
.site-header{
  position:sticky; top:0; z-index:900; background:#fff;
  border-bottom:1px solid var(--line);
  transition:box-shadow .2s ease;
}
.site-header.stuck{ box-shadow:var(--shadow-sm) }

.util-bar{
  background:var(--ink); color:rgba(255,255,255,.72); font-size:.82rem;
}
.util-bar .wrap{ display:flex; align-items:center; justify-content:flex-end; gap:22px; min-height:38px }
.util-bar a{ color:rgba(255,255,255,.78) }
.util-bar a:hover{ color:var(--accent) }
.util-bar__contact{ display:flex; gap:18px; margin-right:auto }
.util-bar__contact span{ display:inline-flex; align-items:center; gap:7px }
.util-bar svg{ width:15px; height:15px; color:var(--accent) }

.head-row{ display:flex; align-items:center; gap:26px; min-height:var(--header-h) }

.brand{ display:inline-flex; align-items:center; gap:11px; flex:none }
.brand__mark{ width:auto; height:38px }
.brand__text{ display:flex; flex-direction:column; line-height:1 }
.brand__text b{
  font-family:var(--font-head); font-weight:800; font-size:1.16rem;
  letter-spacing:-.01em; color:var(--ink);
}
.brand__text i{
  font-style:normal; font-size:.56rem; font-weight:600;
  letter-spacing:.34em; color:var(--accent-hover); margin-top:3px;
}
.brand--light .brand__text b{ color:#fff }
.brand--light .brand__text i{ color:var(--accent) }
.custom-logo-link img{ max-height:44px; width:auto }

.head-actions{ display:flex; align-items:center; gap:12px; margin-left:auto }

/* --- primary nav --- */
.main-nav{ margin-left:auto }
.nav-list{ display:flex; align-items:center; gap:4px; list-style:none; margin:0; padding:0 }
.nav-item{ position:static }
.nav-link{
  display:inline-flex; align-items:center; gap:5px;
  font-family:var(--font-head); font-weight:700; font-size:.94rem; color:var(--ink);
  padding:26px 14px; position:relative;
}
.nav-link svg{ width:15px; height:15px; transition:transform .2s ease }
.nav-link::after{
  content:''; position:absolute; left:14px; right:14px; bottom:18px; height:2px;
  background:var(--accent); transform:scaleX(0); transform-origin:left; transition:transform .2s ease;
}
.nav-item:hover .nav-link,.nav-item:focus-within .nav-link{ color:var(--ink-hover) }
.nav-item:hover .nav-link::after,.nav-item:focus-within .nav-link::after,.nav-item.current .nav-link::after{ transform:scaleX(1) }
.nav-item:hover .nav-link svg{ transform:rotate(180deg) }

.nav-panel{
  position:absolute; left:0; right:0; top:100%;
  background:#fff; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  box-shadow:var(--shadow-md);
  opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:opacity .18s ease, transform .18s ease, visibility .18s;
  z-index:20;
}
.nav-item:hover .nav-panel,.nav-item:focus-within .nav-panel{ opacity:1; visibility:visible; transform:none }
.nav-panel__inner{ display:grid; grid-template-columns:1fr; gap:34px; padding:38px 24px 42px }
.nav-panel__inner:has(.nav-feature){ grid-template-columns:1fr 300px }
.nav-cols{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:34px }
.nav-col h4{
  font-size:.72rem; letter-spacing:.15em; text-transform:uppercase;
  color:var(--muted-2); margin-bottom:14px; font-weight:700;
}
.nav-col ul{ list-style:none; margin:0; padding:0; display:grid; gap:2px }
.nav-col a{
  display:flex; align-items:center; gap:11px; padding:8px 10px; margin-left:-10px;
  border-radius:var(--r-sm); font-weight:600; font-size:.94rem; color:var(--ink);
}
.nav-col a svg{ width:18px; height:18px; color:var(--accent-hover) }
.nav-col a:hover{ background:var(--accent-soft); color:var(--ink-hover) }

.nav-feature{
  display:block; padding:26px; border-radius:var(--r-md);
  background:var(--ink); color:rgba(255,255,255,.74);
}
.nav-feature .eyebrow{ color:var(--accent); margin-bottom:8px }
.nav-feature strong{ display:block; font-family:var(--font-head); font-size:1.24rem; color:#fff; margin-bottom:8px }
.nav-feature p{ font-size:.9rem; margin-bottom:14px }
.nav-feature em{ font-style:normal; display:inline-flex; align-items:center; gap:7px; color:var(--accent); font-weight:700; font-size:.9rem }
.nav-feature:hover{ background:var(--ink-hover) }

.nav-panel--simple .nav-panel__inner{ grid-template-columns:1fr; max-width:var(--wrap); margin-inline:auto }
.nav-simple{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:4px }
.nav-simple a{ display:block; padding:9px 12px; border-radius:var(--r-sm); font-weight:600 }
.nav-simple a:hover{ background:var(--accent-soft) }

.nav-toggle,.nav-close{
  display:none; background:transparent; border:1px solid var(--line);
  border-radius:var(--r-sm); padding:9px; color:var(--ink);
}
.nav-drawer-head{ display:none }
.nav-backdrop{
  position:fixed; inset:0; background:rgba(7,42,66,.5); opacity:0; visibility:hidden;
  transition:opacity .25s ease, visibility .25s; z-index:880;
}
body.nav-open .nav-backdrop{ opacity:1; visibility:visible }

/* ============================================================
   HOME HERO
   ============================================================ */
.hero{
  position:relative; background:var(--ink); color:rgba(255,255,255,.8);
  overflow:hidden; isolation:isolate;
}
.hero::before{
  content:''; position:absolute; inset:0; z-index:-2;
  background:
    radial-gradient(900px 560px at 82% 12%, rgba(12,194,143,.24), transparent 62%),
    radial-gradient(700px 500px at 8% 92%, rgba(29,61,94,.85), transparent 60%),
    linear-gradient(160deg,var(--ink) 0%,var(--ink-2) 100%);
}
.hero__media{ position:absolute; inset:0; z-index:-1; opacity:.2 }
.hero__media img{ width:100%; height:100%; object-fit:cover }
.hero__grid{
  position:absolute; inset:0; z-index:-1; opacity:.35;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse at 50% 30%,#000 30%,transparent 78%);
}
.hero__inner{
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:56px; align-items:center; padding:96px 0 104px;
}
.hero h1{ color:#fff; margin-bottom:22px }
.hero h1 em{ font-style:normal; color:var(--accent) }
.hero .sub{ font-size:1.12rem; max-width:56ch; color:rgba(255,255,255,.76) }
.hero-actions{ display:flex; gap:14px; flex-wrap:wrap; margin:30px 0 34px }
.hero-proof{ display:flex; gap:28px; flex-wrap:wrap; border-top:1px solid var(--line-2); padding-top:26px }
.hero-proof div b{
  display:block; font-family:var(--font-head); font-size:1.75rem; color:#fff; line-height:1.1;
}
.hero-proof div span{ font-size:.83rem; color:rgba(255,255,255,.6) }

/* hero product card */
.hero-card{
  background:rgba(255,255,255,.05); border:1px solid var(--line-2);
  border-radius:var(--r-lg); padding:28px; backdrop-filter:blur(6px);
}
.hero-card__art{
  background:#fff; border-radius:var(--r-md); padding:14px; margin-bottom:20px;
}
.hero-card__art img{ width:100%; aspect-ratio:4/3; object-fit:contain }
.hero-card .eyebrow{ color:var(--accent) }
.hero-card h3{ color:#fff; margin-bottom:8px }
.hero-card p{ font-size:.93rem; color:rgba(255,255,255,.7); margin-bottom:16px }

/* ============================================================
   PAGE HERO (inner pages)
   ============================================================ */
.page-hero{
  position:relative; background:var(--ink); color:rgba(255,255,255,.76);
  padding:72px 0 76px; background-size:cover; background-position:center;
}
.page-hero::before{
  content:''; position:absolute; inset:0;
  background:linear-gradient(120deg,rgba(20,45,70,.96) 0%,rgba(20,45,70,.78) 60%,rgba(12,194,143,.28) 100%);
}
.page-hero .wrap{ position:relative }
.page-hero h1{ color:#fff; margin-bottom:14px; max-width:22ch }
.page-hero__sub{ max-width:64ch; font-size:1.06rem; color:rgba(255,255,255,.76); margin:0 }

.crumbs{ display:flex; align-items:center; gap:8px; font-size:.82rem; margin-bottom:20px; flex-wrap:wrap }
.crumbs a{ color:rgba(255,255,255,.62) }
.crumbs a:hover{ color:var(--accent) }
.crumbs i{ font-style:normal; color:rgba(255,255,255,.32) }
.crumbs span{ color:#fff }

/* ============================================================
   CARD GRIDS
   ============================================================ */
.grid{ display:grid; gap:24px }
.grid-2{ grid-template-columns:repeat(2,minmax(0,1fr)) }
.grid-3{ grid-template-columns:repeat(3,minmax(0,1fr)) }
.grid-4{ grid-template-columns:repeat(4,minmax(0,1fr)) }

.card{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-md);
  padding:28px; transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease;
  display:flex; flex-direction:column;
}
.card:hover{ border-color:var(--accent-line); box-shadow:var(--shadow-md); transform:translateY(-3px) }
.card__ico{
  width:48px; height:48px; border-radius:var(--r-sm); display:grid; place-items:center;
  background:var(--accent-soft); color:var(--accent-hover); margin-bottom:18px;
}
.card__ico svg{ width:24px; height:24px }
.card h3{ margin-bottom:10px }
.card p{ font-size:.95rem; margin-bottom:16px }
.card .link-arrow{ margin-top:auto }
.bg-ink .card{ background:rgba(255,255,255,.04); border-color:var(--line-2) }
.bg-ink .card:hover{ border-color:var(--accent-line); background:rgba(255,255,255,.07) }
.bg-ink .card__ico{ background:rgba(12,194,143,.15); color:var(--accent) }
.bg-ink .card p{ color:rgba(255,255,255,.7) }

/* --- product card --- */
.p-card{
  display:flex; flex-direction:column; background:#fff;
  border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden;
  transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.p-card:hover{ border-color:var(--accent-line); box-shadow:var(--shadow-md); transform:translateY(-3px) }
.p-card__media{
  position:relative; background:var(--paper-2); padding:24px;
  display:grid; place-items:center; aspect-ratio:4/3;
}
.p-card__media img{ width:100%; height:100%; object-fit:contain }
.p-card__badge{
  position:absolute; top:14px; left:14px; background:var(--accent); color:#04241a;
  font-family:var(--font-head); font-weight:800; font-size:.66rem; letter-spacing:.12em;
  padding:5px 10px; border-radius:var(--r-pill);
}
.p-card__body{ padding:22px 24px 26px; display:flex; flex-direction:column; flex:1 }
.p-card__fam{ font-size:.74rem; letter-spacing:.13em; text-transform:uppercase; color:var(--muted-2); font-weight:700; margin-bottom:8px }
.p-card__body h3{ font-size:1.2rem; margin-bottom:4px }
.p-card__tag{ font-size:.88rem; color:var(--accent-hover); font-weight:600; margin-bottom:12px }
.p-card__body p{ font-size:.92rem; margin-bottom:16px }
.p-card__body .link-arrow{ margin-top:auto }

/* --- family / industry tiles --- */
.tile{
  display:flex; align-items:center; gap:16px; padding:20px 22px;
  border:1px solid var(--line); border-radius:var(--r-md); background:#fff;
  transition:border-color .2s ease, background .2s ease, transform .2s ease;
}
.tile:hover{ border-color:var(--accent-line); background:var(--accent-soft); transform:translateY(-2px) }
.tile__ico{
  width:44px; height:44px; border-radius:var(--r-sm); display:grid; place-items:center;
  background:var(--accent-soft); color:var(--accent-hover); flex:none;
}
.tile:hover .tile__ico{ background:#fff }
.tile b{ display:block; font-family:var(--font-head); font-size:1rem; color:var(--ink) }
.tile span{ display:block; font-size:.86rem; color:var(--muted) }

/* ============================================================
   PLATFORM TABS (on-prem / cloud)
   ============================================================ */
.pf-tabs{ display:flex; gap:8px; justify-content:center; margin-bottom:40px; flex-wrap:wrap }
.pf-tab{
  display:inline-flex; align-items:center; gap:9px; padding:12px 24px;
  border:1.5px solid var(--line); border-radius:var(--r-pill); background:#fff;
  font-family:var(--font-head); font-weight:700; font-size:.95rem; color:var(--ink);
  transition:all .18s ease;
}
.pf-tab svg{ width:18px; height:18px }
.pf-tab:hover{ border-color:var(--accent-line) }
.pf-tab.active{ background:var(--ink); border-color:var(--ink); color:#fff }
.pf-tab.active svg{ color:var(--accent) }

.pf-panel{ display:none }
.pf-panel.active{ display:block; animation:fadeUp .35s ease }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(10px) } to{ opacity:1; transform:none } }

.pf-split{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:56px; align-items:center }
.pf-name{
  display:inline-flex; align-items:center; gap:10px; font-family:var(--font-head);
  font-weight:800; font-size:1.9rem; color:var(--ink); margin-bottom:14px;
}
.pf-name svg{ width:30px; height:30px; color:var(--accent-hover) }
.pf-points{ display:grid; gap:20px; margin-top:28px }
.pf-point{ display:flex; gap:15px }
.pf-point__ico{
  width:40px; height:40px; border-radius:var(--r-sm); display:grid; place-items:center;
  background:var(--accent-soft); color:var(--accent-hover); flex:none;
}
.pf-point b{ display:block; font-family:var(--font-head); color:var(--ink); margin-bottom:3px }
.pf-point p{ font-size:.93rem; margin:0 }

.pf-visual{
  background:var(--ink); border-radius:var(--r-lg); padding:34px; color:rgba(255,255,255,.75);
  position:relative; overflow:hidden;
}
.pf-visual::after{
  content:''; position:absolute; inset:0;
  background:radial-gradient(500px 300px at 88% 6%,rgba(12,194,143,.28),transparent 62%);
}
.pf-visual > *{ position:relative }
.pf-layer{
  display:flex; align-items:center; gap:14px; padding:15px 18px; border-radius:var(--r-sm);
  background:rgba(255,255,255,.05); border:1px solid var(--line-2); margin-bottom:10px;
}
.pf-layer svg{ color:var(--accent) }
.pf-layer b{ color:#fff; font-family:var(--font-head); font-size:.96rem }
.pf-layer span{ display:block; font-size:.82rem; color:rgba(255,255,255,.6) }

/* ============================================================
   STATS
   ============================================================ */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px }
.stat{ padding:26px 0; border-top:3px solid var(--accent) }
.stat b{ display:block; font-family:var(--font-head); font-size:2.3rem; color:var(--ink); line-height:1.05 }
.stat span{ font-size:.88rem; color:var(--muted) }
.bg-ink .stat b{ color:#fff }
.bg-ink .stat span{ color:rgba(255,255,255,.64) }

/* ============================================================
   LOGO STRIP
   ============================================================ */
.logos{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px }
.logo-plate{
  display:grid; place-items:center; min-height:78px; padding:0 22px;
  border:1px solid var(--line); border-radius:var(--r-sm); background:#fff;
  font-family:var(--font-head); font-weight:700; font-size:.93rem; color:var(--muted-2);
  letter-spacing:.02em; text-align:center; transition:color .2s ease, border-color .2s ease;
}
.logo-plate:hover{ color:var(--ink); border-color:var(--accent-line) }
.logo-plate img{ max-height:38px; width:auto; object-fit:contain }

/* ============================================================
   PRODUCT SINGLE
   ============================================================ */
.prod-hero{ background:var(--paper-2); padding:0 0 72px; border-bottom:1px solid var(--line) }
.prod-hero__bar{ background:var(--ink); padding:16px 0 }
.prod-hero__bar .crumbs{ margin:0 }
.prod-top{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:56px; align-items:center; padding-top:56px }
.prod-shot{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:36px; display:grid; place-items:center; position:relative;
}
.prod-shot img{ width:100%; max-width:420px; aspect-ratio:1; object-fit:contain }
.prod-shot .p-card__badge{ top:18px; left:18px }
.prod-model{
  display:inline-block; font-family:var(--font-head); font-weight:700; font-size:.76rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted-2);
  border:1px solid var(--line); border-radius:var(--r-pill); padding:5px 13px; margin-bottom:16px;
}
.prod-top h1{ font-size:clamp(2rem,3.6vw,3rem); margin-bottom:10px }
.prod-tagline{ font-family:var(--font-head); font-weight:700; color:var(--accent-hover); font-size:1.05rem; margin-bottom:16px }
.prod-actions{ display:flex; gap:12px; flex-wrap:wrap; margin-top:26px }

.prod-highlights{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:var(--r-md);
  overflow:hidden; margin-top:34px;
}
.prod-highlights div{ background:#fff; padding:20px 22px }
.prod-highlights b{ display:block; font-family:var(--font-head); font-size:1.5rem; color:var(--ink); line-height:1.1 }
.prod-highlights span{ font-size:.82rem; color:var(--muted) }

/* sticky in-page nav */
.prod-nav{
  position:sticky; top:var(--header-h); z-index:80; background:#fff;
  border-bottom:1px solid var(--line);
}
.prod-nav ul{ display:flex; gap:4px; list-style:none; margin:0; padding:0; overflow-x:auto }
.prod-nav a{
  display:block; padding:17px 18px; font-family:var(--font-head); font-weight:700;
  font-size:.9rem; color:var(--muted); white-space:nowrap; border-bottom:2px solid transparent;
}
.prod-nav a:hover,.prod-nav a.active{ color:var(--ink); border-bottom-color:var(--accent) }

.feature-row{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:26px }
.feature-item{ display:flex; gap:17px; padding:24px; border:1px solid var(--line); border-radius:var(--r-md); background:#fff }
.feature-item__ico{
  width:46px; height:46px; border-radius:var(--r-sm); display:grid; place-items:center;
  background:var(--accent-soft); color:var(--accent-hover); flex:none;
}
.feature-item h3{ font-size:1.05rem; margin-bottom:6px }
.feature-item p{ font-size:.93rem; margin:0 }

/* spec table */
.spec-group{ margin-bottom:34px; border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden }
.spec-group > h3{
  margin:0; padding:16px 22px; background:var(--ink); color:#fff;
  font-size:.86rem; letter-spacing:.12em; text-transform:uppercase;
}
.spec-table{ width:100%; border-collapse:collapse; font-size:.94rem }
.spec-table th,.spec-table td{ padding:14px 22px; text-align:left; vertical-align:top; border-top:1px solid var(--line) }
.spec-table tr:first-child th,.spec-table tr:first-child td{ border-top:0 }
.spec-table th{ width:36%; font-weight:600; color:var(--ink); background:var(--paper-2) }
.spec-table td{ color:var(--muted) }

/* download rows */
.dl-row{
  display:flex; align-items:center; gap:16px; padding:18px 22px;
  border:1px solid var(--line); border-radius:var(--r-md); background:#fff; margin-bottom:10px;
  transition:border-color .2s ease, background .2s ease;
}
.dl-row:hover{ border-color:var(--accent-line); background:var(--accent-soft) }
.dl-row__ico{
  width:44px; height:44px; border-radius:var(--r-sm); display:grid; place-items:center;
  background:var(--accent-soft); color:var(--accent-hover); flex:none;
}
.dl-row:hover .dl-row__ico{ background:#fff }
.dl-row b{ display:block; font-family:var(--font-head); color:var(--ink); font-size:1rem }
.dl-row span{ font-size:.84rem; color:var(--muted-2) }
.dl-row .link-arrow{ margin-left:auto; flex:none }
.dl-row__meta{ display:flex; gap:12px; align-items:center }
.tagpill{
  font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--accent-hover); background:var(--accent-tint); padding:4px 10px; border-radius:var(--r-pill);
}

/* ============================================================
   CERTIFICATIONS
   ============================================================ */
.certs{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; background:var(--line-2) }
.cert{ background:var(--ink); padding:26px 24px; text-align:center }
.cert b{ display:block; font-family:var(--font-head); font-size:1.06rem; color:#fff; margin-bottom:5px }
.cert span{ font-size:.82rem; color:rgba(255,255,255,.6) }

/* ============================================================
   QUOTE / STORY
   ============================================================ */
.quote-band{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:56px; align-items:center }
.big-quote{ font-family:var(--font-head); font-size:clamp(1.35rem,2.4vw,1.9rem); line-height:1.35; color:var(--ink); font-weight:700 }
.bg-ink .big-quote{ color:#fff }
.quote-by{ margin-top:20px; font-size:.92rem; color:var(--muted) }
.bg-ink .quote-by{ color:rgba(255,255,255,.64) }
.quote-mark{ color:var(--accent); margin-bottom:18px }
.quote-mark svg{ width:38px; height:38px }

.story-card{
  display:flex; flex-direction:column; border:1px solid var(--line); border-radius:var(--r-md);
  overflow:hidden; background:#fff; transition:box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.story-card:hover{ box-shadow:var(--shadow-md); transform:translateY(-3px); border-color:var(--accent-line) }
.story-card__media{ aspect-ratio:16/10; overflow:hidden; background:var(--paper-2) }
.story-card__media img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease }
.story-card:hover .story-card__media img{ transform:scale(1.05) }
.story-card__body{ padding:24px; display:flex; flex-direction:column; flex:1 }
.story-meta{ display:flex; gap:10px; flex-wrap:wrap; font-size:.76rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted-2); font-weight:700; margin-bottom:10px }
.story-card h3{ font-size:1.12rem; margin-bottom:10px }
.story-card p{ font-size:.93rem; margin-bottom:16px }
.story-card .link-arrow{ margin-top:auto }

/* ============================================================
   POSTS
   ============================================================ */
.post-card{ display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; transition:box-shadow .2s ease, transform .2s ease, border-color .2s ease }
.post-card:hover{ box-shadow:var(--shadow-md); transform:translateY(-3px); border-color:var(--accent-line) }
.post-card__media{ aspect-ratio:16/9; overflow:hidden; background:var(--paper-2) }
.post-card__media img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease }
.post-card:hover .post-card__media img{ transform:scale(1.05) }
.post-card__body{ padding:24px; display:flex; flex-direction:column; flex:1 }
.post-date{ font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:var(--accent-hover); font-weight:700; margin-bottom:10px }
.post-card h3{ font-size:1.1rem; margin-bottom:10px }
.post-card p{ font-size:.93rem; margin-bottom:16px }
.post-card .link-arrow{ margin-top:auto }

.entry{ max-width:760px; margin-inline:auto }
.entry h2{ font-size:1.6rem; margin-top:1.6em }
.entry h3{ margin-top:1.4em }
.entry img{ border-radius:var(--r-md); margin:1.6em 0 }
.entry blockquote{
  margin:1.8em 0; padding:22px 26px; border-left:3px solid var(--accent);
  background:var(--accent-soft); border-radius:0 var(--r-sm) var(--r-sm) 0;
  font-family:var(--font-head); font-weight:600; color:var(--ink);
}
.entry ul li,.entry ol li{ margin-bottom:.5em }

/* ============================================================
   FAQ
   ============================================================ */
.faq-list{ display:grid; gap:10px; max-width:900px }
.faq-item{ border:1px solid var(--line); border-radius:var(--r-md); background:#fff; overflow:hidden }
.faq-item.open{ border-color:var(--accent-line) }
.faq-q{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:18px;
  padding:19px 24px; background:transparent; border:0; text-align:left;
  font-family:var(--font-head); font-weight:700; font-size:1rem; color:var(--ink);
}
.faq-plus{ position:relative; width:16px; height:16px; flex:none }
.faq-plus::before,.faq-plus::after{
  content:''; position:absolute; background:var(--accent-hover); border-radius:2px;
  transition:transform .22s ease;
}
.faq-plus::before{ inset:7px 0; height:2px }
.faq-plus::after{ inset:0 7px; width:2px }
.faq-item.open .faq-plus::after{ transform:scaleY(0) }
.faq-a{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .28s ease }
.faq-item.open .faq-a{ grid-template-rows:1fr }
.faq-a > div{ overflow:hidden }
.faq-a p{ padding:0 24px 22px; margin:0; font-size:.96rem }

/* ============================================================
   FORMS
   ============================================================ */
.form-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px }
.field{ display:flex; flex-direction:column; gap:7px }
.field--full{ grid-column:1 / -1 }
.field label{ font-family:var(--font-head); font-weight:700; font-size:.84rem; color:var(--ink) }
.field input,.field select,.field textarea{
  font:inherit; font-size:.95rem; color:var(--ink); background:#fff;
  border:1.5px solid var(--line); border-radius:var(--r-sm); padding:12px 14px; width:100%;
  transition:border-color .18s ease, box-shadow .18s ease;
}
.field textarea{ min-height:130px; resize:vertical }
.field input:focus,.field select:focus,.field textarea:focus{
  outline:0; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-tint);
}
.form-note{ font-size:.84rem; color:var(--muted-2) }
.form-msg{ margin-top:14px; padding:13px 16px; border-radius:var(--r-sm); font-size:.92rem; display:none }
.form-msg.ok{ display:block; background:var(--accent-soft); color:#04553c; border:1px solid var(--accent-line) }
.form-msg.err{ display:block; background:#fdecec; color:#8b1e1e; border:1px solid #f3c6c6 }

.form-panel{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:34px; box-shadow:var(--shadow-sm);
}

/* ============================================================
   CTA BAND
   ============================================================ */
.cta-band{ background:var(--ink); position:relative; overflow:hidden }
.cta-band::before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(760px 420px at 88% 20%,rgba(12,194,143,.26),transparent 62%);
}
.cta-band .wrap{ position:relative; display:flex; align-items:center; justify-content:space-between; gap:36px; flex-wrap:wrap; padding-block:64px }
.cta-band h2{ color:#fff; margin:0 0 8px; max-width:20ch }
.cta-band p{ color:rgba(255,255,255,.72); margin:0; max-width:52ch }
.cta-band__actions{ display:flex; gap:12px; flex-wrap:wrap }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{ background:var(--ink-2); color:rgba(255,255,255,.66); font-size:.93rem }
.foot-top{
  display:grid; grid-template-columns:minmax(0,1.3fr) repeat(4,minmax(0,1fr));
  gap:36px; padding:68px 0 52px;
}
.foot-brand .brand{ margin-bottom:18px }
.foot-brand p{ font-size:.92rem; max-width:34ch; color:rgba(255,255,255,.6) }
.foot-contact{ display:grid; gap:10px; margin-top:20px }
.foot-contact a,.foot-contact span{ display:flex; align-items:flex-start; gap:10px; color:rgba(255,255,255,.72); font-size:.9rem }
.foot-contact svg{ width:17px; height:17px; color:var(--accent); margin-top:2px }
.foot-contact a:hover{ color:var(--accent) }

.foot-col h4{
  color:#fff; font-size:.76rem; letter-spacing:.15em; text-transform:uppercase; margin-bottom:16px;
}
.foot-col ul{ list-style:none; margin:0; padding:0; display:grid; gap:9px }
.foot-col a{ color:rgba(255,255,255,.64); font-size:.9rem }
.foot-col a:hover{ color:var(--accent) }

.foot-base{
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
  border-top:1px solid var(--line-2); padding:24px 0 34px; font-size:.85rem;
}
.foot-legal{ display:flex; gap:18px; flex-wrap:wrap }
.foot-legal a{ color:rgba(255,255,255,.56) }
.foot-legal a:hover{ color:var(--accent) }
.foot-social{ display:flex; gap:8px }
.foot-social a{
  width:36px; height:36px; border-radius:var(--r-sm); display:grid; place-items:center;
  background:rgba(255,255,255,.06); color:rgba(255,255,255,.76); transition:all .18s ease;
}
.foot-social a:hover{ background:var(--accent); color:#04241a }

.scroll-top{
  position:fixed; right:22px; bottom:22px; z-index:800;
  width:44px; height:44px; border:0; border-radius:var(--r-sm);
  background:var(--ink); color:#fff; display:grid; place-items:center;
  opacity:0; visibility:hidden; transform:translateY(10px);
  transition:all .25s ease; box-shadow:var(--shadow-md);
}
.scroll-top.show{ opacity:1; visibility:visible; transform:none }
.scroll-top:hover{ background:var(--accent); color:#04241a }

/* ============================================================
   PAGINATION / MISC
   ============================================================ */
.pagination{ display:flex; gap:6px; justify-content:center; margin-top:52px; flex-wrap:wrap }
.pagination .page-numbers{
  display:grid; place-items:center; min-width:42px; height:42px; padding:0 12px;
  border:1px solid var(--line); border-radius:var(--r-sm);
  font-family:var(--font-head); font-weight:700; font-size:.92rem; color:var(--ink);
}
.pagination .page-numbers:hover{ border-color:var(--accent); color:var(--accent-hover) }
.pagination .current{ background:var(--ink); border-color:var(--ink); color:#fff }

.filter-bar{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:36px }
.filter-bar a{
  padding:9px 18px; border:1.5px solid var(--line); border-radius:var(--r-pill);
  font-family:var(--font-head); font-weight:700; font-size:.88rem; color:var(--ink);
  transition:all .18s ease;
}
.filter-bar a:hover{ border-color:var(--accent-line); color:var(--accent-hover) }
.filter-bar a.active{ background:var(--ink); border-color:var(--ink); color:#fff }

.split{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:56px; align-items:center }
.split__media img{ border-radius:var(--r-lg); box-shadow:var(--shadow-md); width:100% }
.checks{ list-style:none; padding:0; margin:22px 0 0; display:grid; gap:12px }
.checks li{ display:flex; gap:11px; align-items:flex-start; font-size:.96rem }
.checks svg{ width:20px; height:20px; color:var(--accent-hover); margin-top:2px }
.bg-ink .checks svg{ color:var(--accent) }

.xmark img{ height:44px; width:auto }
.notice{ padding:34px; border:1px dashed var(--line); border-radius:var(--r-md); text-align:center; color:var(--muted-2) }

/* reveal on scroll */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .55s ease, transform .55s ease }
.reveal.in{ opacity:1; transform:none }
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; transition:none }
  html{ scroll-behavior:auto }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1180px){
  .foot-top{ grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr)) }
  .nav-link{ padding:26px 10px; font-size:.9rem }
}

@media (max-width:1024px){
  .hero__inner{ grid-template-columns:1fr; gap:44px; padding:64px 0 72px }
  .pf-split,.split,.quote-band,.prod-top{ grid-template-columns:1fr; gap:38px }
  .grid-4{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .logos{ grid-template-columns:repeat(3,minmax(0,1fr)) }
  .stats{ grid-template-columns:repeat(2,1fr) }
  .certs{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .feature-row{ grid-template-columns:1fr }
  .nav-simple{ grid-template-columns:repeat(2,1fr) }

  /* drawer navigation */
  .nav-toggle{ display:grid; place-items:center; margin-left:auto }
  .head-actions .btn{ display:none }
  .main-nav{
    position:fixed; top:0; right:0; bottom:0; width:min(420px,92vw); z-index:890;
    background:#fff; padding:0; overflow-y:auto; transform:translateX(102%);
    transition:transform .3s ease; box-shadow:var(--shadow-lg);
  }
  body.nav-open .main-nav{ transform:none }
  .nav-drawer-head{
    display:flex; align-items:center; justify-content:space-between; gap:16px;
    padding:18px 22px; border-bottom:1px solid var(--line); position:sticky; top:0; background:#fff; z-index:2;
  }
  .nav-close{ display:grid; place-items:center }
  .nav-list{ flex-direction:column; align-items:stretch; gap:0; padding:8px 12px 40px }
  .nav-item{ border-bottom:1px solid var(--line) }
  .nav-link{ padding:16px 10px; justify-content:space-between; width:100% }
  .nav-link::after{ display:none }
  .nav-item:hover .nav-link svg{ transform:none }
  .nav-item.open .nav-link svg{ transform:rotate(180deg) }
  .nav-panel{
    position:static; opacity:1; visibility:visible; transform:none; box-shadow:none;
    border:0; display:none; background:var(--paper-2); border-radius:var(--r-sm);
  }
  .nav-item.open .nav-panel{ display:block }
  .nav-item:hover .nav-panel{ opacity:1; visibility:visible }
  .nav-panel__inner,.nav-panel__inner:has(.nav-feature){ grid-template-columns:1fr; padding:16px; gap:20px }
  .nav-cols{ grid-template-columns:1fr; gap:20px }
  .nav-feature{ padding:20px }
  .prod-nav{ top:0 }
}

@media (max-width:860px){
  .section{ padding:68px 0 }
  .grid-3{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .logos{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .foot-top{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:32px; padding:52px 0 40px }
  .util-bar__contact{ display:none }
  .util-bar .wrap{ justify-content:center }
  .prod-highlights{ grid-template-columns:repeat(2,1fr) }
}

@media (max-width:640px){
  body{ font-size:16px }
  .section{ padding:56px 0 }
  .grid-2,.grid-3,.grid-4{ grid-template-columns:1fr }
  .stats,.certs{ grid-template-columns:1fr }
  .form-grid{ grid-template-columns:1fr }
  .foot-top{ grid-template-columns:1fr }
  .hero-proof{ gap:20px }
  .hero-proof div b{ font-size:1.45rem }
  .form-panel{ padding:24px }
  .prod-highlights{ grid-template-columns:1fr }
  .cta-band .wrap{ padding-block:48px }
  .spec-table th{ width:44% }
  .spec-table th,.spec-table td{ padding:12px 16px }
}