/* PLAXRAW — Reusable Components
   Header, Navigation, Buttons, Hero, Section Header, Platform Card,
   Split Media/Text row, Knowledge Card, CTA, Footer, and the shared
   hexagon visual language. Requires variables.css.
*/

/* Hexagon visual language */
.hex{ clip-path: var(--hex-clip); }
.hex-outline{ position:relative; }
.hex-outline::before{
  content:"";
  position:absolute; inset:0;
  clip-path: var(--hex-clip);
  padding:2px;
  background: var(--gradient-secondary);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}
.hex-bullet{
  width:34px; height:34px;
  display:flex; align-items:center; justify-content:center;
  background:var(--gradient-secondary);
  clip-path: var(--hex-clip);
  color:#fff; font-size:13px; font-weight:600; flex-shrink:0;
}

/* Header / Navigation */
header{
  position:sticky; top:0; z-index:50;
  background:rgba(246,248,245,0.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav{ display:flex; align-items:center; justify-content:space-between; padding:16px 0; }
.brand{ display:flex; align-items:center; gap:10px; font-family:'Poppins'; font-weight:700; font-size:19px; }
.brand img{ width:38px; height:38px; }
.navlinks{ display:flex; gap:32px; font-size:15px; font-weight:500; color:var(--ink); }
@media (max-width:960px){ .navlinks{ display:none; } }
.nav-actions{ display:flex; align-items:center; gap:12px; }
@media (max-width:960px){ .nav-actions{ flex-wrap:wrap; justify-content:flex-end; gap:8px; } }
@media (max-width:540px){ .nav-actions .btn-ghost{ display:none; } }
@media (max-width:480px){
  .nav{ flex-wrap:wrap; row-gap:12px; }
  .nav-actions{ flex-basis:100%; justify-content:space-between; }
}

/* Mobile navigation toggle — new, supports navigation.js.
   Hidden on desktop; only .navlinks{display:none} at <=960px existed before. */
.nav-toggle{
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:32px; height:32px;
  background:transparent;
  border:none;
  cursor:pointer;
  padding:0;
}
.nav-toggle span{
  display:block;
  width:100%;
  height:2px;
  background:var(--ink);
  border-radius:2px;
}
@media (max-width:960px){
  .nav-toggle{ display:flex; }
  .navlinks.is-open{
    display:flex;
    flex-direction:column;
    position:absolute;
    top:100%; left:0; right:0;
    background:var(--paper);
    padding:20px 32px;
    gap:20px;
    border-bottom:1px solid var(--line);
    z-index:1;
  }
}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:11px 22px; border-radius:var(--radius-pill); font-weight:600; font-size:14.5px;
  transition:transform .15s ease, box-shadow .15s ease;
}
.btn-primary{ background:linear-gradient(135deg, var(--green), var(--teal)); color:#fff; box-shadow:0 6px 20px rgba(20,106,110,0.25); }
.btn-primary:hover{ transform:translateY(-2px); }
.btn-ghost{ border:1.5px solid var(--line); color:var(--ink); }
.btn-ghost:hover{ border-color:var(--teal); }
/* Modifier: ghost button placed on a dark background (e.g. inside .hero).
   Replaces the inline style previously on the hero's secondary button. */
.btn-ghost-on-dark{ color:#fff; border-color:rgba(255,255,255,0.35); }

/* Language switch */
.lang-switch{ display:flex; border:1.5px solid var(--line); border-radius:var(--radius-pill); overflow:hidden; }
.lang-btn{ padding:8px 14px; font-size:13px; font-weight:700; font-family:'IBM Plex Mono'; cursor:pointer; background:transparent; color:var(--ink-soft); border:none; }
.lang-btn.active{ background:var(--navy); color:#fff; }

/* Hero */
.hero{ position:relative; min-height:440px; display:flex; align-items:center; background:#0c2224; overflow:hidden; padding:0; }
.hero-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero-scrim{ position:absolute; inset:0; background: linear-gradient(90deg, rgba(6,26,27,0.35) 0%, rgba(6,26,27,0.55) 45%, rgba(6,26,27,0.88) 100%); }
html[dir="ltr"] .hero-scrim{ background: linear-gradient(270deg, rgba(6,26,27,0.35) 0%, rgba(6,26,27,0.55) 45%, rgba(6,26,27,0.88) 100%); }
.hero-content{ position:relative; z-index:2; color:#fff; max-width:640px; padding:64px 0; margin-inline-start:auto; }
.eyebrow{ display:inline-flex; align-items:center; gap:10px; font-family:'IBM Plex Mono'; font-size:12.5px; color:var(--lime); text-transform:uppercase; letter-spacing:0.12em; margin-bottom:22px; }
.eyebrow .dash{ width:26px; height:2px; background:var(--lime); }
.hero h1{ font-size:42px; font-weight:700; line-height:1.3; margin-bottom:20px; }
.hero p{ font-size:17px; color:rgba(255,255,255,0.82); margin-bottom:34px; max-width:520px; }
.hero-actions{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom:40px; }
.hero-search{ display:flex; align-items:center; gap:10px; background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.2); border-radius:var(--radius-pill); padding:8px 8px 8px 20px; max-width:520px; }
.hero-search input{ flex:1; background:transparent; border:none; outline:none; color:#fff; font-size:14.5px; font-family:inherit; }
.hero-search input::placeholder{ color:rgba(255,255,255,0.55); }
.hero-search--light{ background:#fff; border-color:var(--line); }
.hero-search--light input{ color:var(--ink); }
.hero-search--light input::placeholder{ color:var(--ink-soft); }
.hero-search button{ background:var(--lime); color:var(--navy); border:none; border-radius:var(--radius-pill); padding:11px 20px; font-weight:600; font-size:14px; cursor:pointer; font-family:inherit; }
@media (max-width:900px){ .hero-content{ margin-inline-start:0; max-width:100%; } .hero h1{ font-size:30px; } }

/* Section Header */
.sec-head{ max-width:640px; margin-bottom:52px; }
.sec-eyebrow{ display:flex; align-items:center; gap:10px; font-family:'IBM Plex Mono'; font-size:12.5px; color:var(--teal); text-transform:uppercase; letter-spacing:0.1em; margin-bottom:14px; }
.sec-head h2{ font-size:30px; margin-bottom:14px; }
.sec-head p{ color:var(--ink-soft); font-size:16px; }

/* Platform Card */
.pillars{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
@media (max-width:900px){ .pillars{ grid-template-columns:1fr; } }
.pillar{ background:#fff; border-radius:var(--radius-card); padding:44px 32px 36px; border:1px solid var(--line); position:relative; transition:transform .2s ease, box-shadow .2s ease; display:flex; flex-direction:column; }
.pillar:hover{ transform:translateY(-6px); box-shadow:0 20px 40px rgba(11,46,47,0.08); }
.pillar-hex{ width:64px; height:64px; background:var(--gradient-secondary); clip-path: var(--hex-clip); display:flex; align-items:center; justify-content:center; margin-bottom:22px; }
.pillar-hex span{ font-family:'Poppins'; font-weight:700; color:#fff; font-size:22px; }
.pillar h3{ font-size:20px; margin-bottom:10px; }
.pillar p{ color:var(--ink-soft); font-size:14.5px; margin-bottom:18px; }
.pillar a.more{ font-size:14px; font-weight:600; color:var(--teal); display:inline-flex; align-items:center; gap:6px; transition:gap .15s ease; margin-top:auto; }
.pillar a.more:hover{ gap:9px; }

/* Split media/text row */
.split{ display:grid; grid-template-columns:1.05fr 0.95fr; gap:60px; align-items:center; }
@media (max-width:900px){ .split{ grid-template-columns:1fr; gap:36px; } }
.split.reverse .split-media{ order:2; }
.split-media{ aspect-ratio:3/2; border-radius:var(--radius-card); overflow:hidden; background:repeating-linear-gradient(45deg, #eef2ee, #eef2ee 12px, #e4e9e4 12px, #e4e9e4 24px); border:1.5px dashed #c7d2c9; display:flex; align-items:center; justify-content:center; font-family:'IBM Plex Mono'; font-size:12px; color:#8a9a92; text-align:center; padding:20px; }
/* Modifier: applied once a real image replaces the placeholder.
   Replaces the inline style previously used on filled split-media blocks. */
.split-media--filled{ background:none; border:none; padding:0; }
.split-media--filled img{ width:100%; height:100%; object-fit:cover; }
.split-text h2{ font-size:27px; margin-bottom:16px; }
.split-text p{ color:var(--ink-soft); margin-bottom:22px; }
.check-list{ display:flex; flex-direction:column; gap:12px; }
.check-list li{ list-style:none; display:flex; gap:10px; align-items:flex-start; font-size:14.5px; color:var(--ink); }
.check-list li b{ color:var(--teal); }

/* Knowledge Card */
.kc-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
@media (max-width:900px){ .kc-grid{ grid-template-columns:1fr; } }
.kc-card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; transition:transform .2s ease, box-shadow .2s ease; display:flex; flex-direction:column; }
.kc-card:hover{ transform:translateY(-4px); box-shadow:0 16px 32px rgba(11,46,47,0.08); }
.kc-tag{ display:inline-block; font-family:'IBM Plex Mono'; font-size:11px; color:var(--teal); background:rgba(20,106,110,0.08); padding:5px 12px; border-radius:var(--radius-pill); margin:22px 22px 14px; }
.kc-card h4{ font-size:16.5px; padding:0 22px; margin-bottom:10px; line-height:1.5; }
.kc-card p{ font-size:14px; color:var(--ink-soft); padding:0 22px; margin-bottom:20px; }
.kc-card .kc-cta{ display:flex; justify-content:space-between; align-items:center; padding:16px 22px; border-top:1px solid var(--line); font-size:13.5px; font-weight:600; color:var(--green); margin-top:auto; }

/* CTA */
.cta-band{ background:linear-gradient(120deg, var(--teal), var(--green)); border-radius:var(--radius-card); padding:56px 48px; display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap; color:#fff; }
.cta-band h3{ font-size:25px; margin-bottom:8px; text-shadow:0 1px 3px rgba(0,0,0,0.15); }
.cta-band p{ color:rgba(255,255,255,0.95); font-size:15px; text-shadow:0 1px 3px rgba(0,0,0,0.15); }
.cta-band .btn-primary{ background:#fff; color:var(--navy); box-shadow:none; }

/* Product Card — extends Knowledge Card (border/radius/cta row) and
   reuses the split-media placeholder pattern for the image slot. */
.product-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
@media (max-width:900px){ .product-grid{ grid-template-columns:1fr; } }
.product-card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; transition:transform .2s ease, box-shadow .2s ease; display:flex; flex-direction:column; }
.product-card .product-media{ flex-shrink:0; }
.product-card:hover{ transform:translateY(-4px); box-shadow:0 16px 32px rgba(11,46,47,0.08); }
.product-media{ aspect-ratio:4/3; background:repeating-linear-gradient(45deg, #eef2ee, #eef2ee 12px, #e4e9e4 12px, #e4e9e4 24px); border-bottom:1.5px dashed #c7d2c9; display:flex; align-items:center; justify-content:center; font-family:'IBM Plex Mono'; font-size:12px; color:#8a9a92; text-align:center; padding:20px; }
.product-media--standalone{ max-width:480px; margin-bottom:56px; border-radius:var(--radius); border:1.5px dashed #c7d2c9; overflow:hidden; }
.product-media--featured{ aspect-ratio:16/9; margin-bottom:40px; border-radius:var(--radius); border:1.5px dashed #c7d2c9; overflow:hidden; }
.product-media--filled{ background:none; border:none; padding:0; }
.product-media--filled img{ width:100%; height:100%; object-fit:cover; display:block; }
.product-card h4{ font-size:17px; padding:20px 22px 0; margin-bottom:8px; line-height:1.4; }
.product-card p{ font-size:14px; color:var(--ink-soft); padding:0 22px; margin-bottom:18px; }
.product-card .product-cta{ display:flex; justify-content:space-between; align-items:center; padding:16px 22px; border-top:1px solid var(--line); font-size:13.5px; font-weight:600; color:var(--green); margin-top:auto; }
.product-card .product-cta a:hover{ text-decoration:underline; }

/* Category filter chips (light background — same shape/behavior as
   the dark .chip used in the homepage's industries band). */
.category-filters{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:32px; }
.category-chip{ padding:10px 20px; border-radius:var(--radius-pill); background:#fff; border:1.5px solid var(--line); font-size:14px; font-weight:500; color:var(--ink-soft); cursor:pointer; font-family:inherit; transition:border-color .15s ease, color .15s ease; }
.category-chip:hover{ border-color:var(--teal); color:var(--ink); }
.category-chip.active{ background:var(--navy); border-color:var(--navy); color:#fff; }
.category-chip.active:hover{ border-color:var(--navy); color:#fff; }

/* Product search (light input, reuses the same shape as .hero-search). */
.product-search{ display:flex; align-items:center; gap:10px; background:#fff; border:1px solid var(--line); border-radius:var(--radius-pill); padding:8px 8px 8px 20px; max-width:420px; margin-bottom:32px; }
.product-search input{ flex:1; background:transparent; border:none; outline:none; color:var(--ink); font-size:14.5px; font-family:inherit; }
.product-search input::placeholder{ color:var(--ink-soft); }

/* Contact form — multi-field layout, distinct from the single-line
   pill-shaped search/newsletter inputs already in use. */
.contact-form{ display:flex; flex-direction:column; gap:20px; max-width:640px; }
.form-field{ display:flex; flex-direction:column; gap:6px; }
.form-field label{ font-size:14px; font-weight:600; color:var(--ink); }
.form-field input, .form-field textarea, .form-field select{ border:1px solid var(--line); border-radius:var(--radius); padding:12px 16px; font-family:inherit; font-size:14.5px; color:var(--ink); background:#fff; }
.form-field textarea{ min-height:140px; resize:vertical; }
.form-field input:focus, .form-field textarea:focus, .form-field select:focus{ outline:2px solid var(--teal); outline-offset:1px; }

/* Article page — meta row, table of contents, prev/next nav */
.article-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:16px; color:var(--ink-soft); font-size:13.5px; margin-bottom:32px; }
.toc{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:24px 28px; margin-bottom:48px; }
.toc h2{ font-size:16px; margin-bottom:14px; }
.toc ul{ list-style:none; display:flex; flex-direction:column; gap:10px; }
.toc a{ color:var(--teal); font-size:14.5px; }
.toc a:hover{ text-decoration:underline; }
.article-body{ max-width:760px; }
.article-body h2{ font-size:22px; margin:40px 0 14px; }
.article-body h2:first-child{ margin-top:0; }
.article-body p{ color:var(--ink-soft); font-size:15.5px; line-height:1.75; margin-bottom:14px; }
.article-body h3{ font-size:16.5px; margin:24px 0 8px; }
.article-nav{ display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; margin:48px 0; padding-top:32px; border-top:1px solid var(--line); }
.article-nav a{ max-width:320px; }

/* Pagination — documented in DESIGN_SYSTEM.md's component list, first use */
.pagination{ display:flex; align-items:center; justify-content:center; gap:8px; margin-top:40px; }
.pagination button{ min-width:38px; height:38px; padding:0 12px; border-radius:var(--radius-pill); border:1px solid var(--line); background:#fff; color:var(--ink); font-family:'IBM Plex Mono'; font-size:13px; cursor:pointer; transition:border-color .15s ease, background .15s ease; }
.pagination button:hover:not(:disabled):not(.active){ border-color:var(--teal); }
.pagination button.active{ background:var(--navy); border-color:var(--navy); color:#fff; }
.pagination button:disabled{ opacity:0.4; cursor:not-allowed; }

/* Breadcrumb — documented in DESIGN_SYSTEM.md's component list, first use */
.breadcrumb{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; font-size:13.5px; color:var(--ink-soft); margin-bottom:24px; }
.breadcrumb a{ color:var(--teal); }
.breadcrumb a:hover{ text-decoration:underline; }
.breadcrumb .sep{ color:var(--line); }
.breadcrumb .current{ color:var(--ink); font-weight:600; }

/* Product spec table */
.spec-table{ width:100%; border-collapse:collapse; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.spec-table tr{ border-bottom:1px solid var(--line); }
.spec-table tr:last-child{ border-bottom:none; }
.spec-table th, .spec-table td{ text-align:start; padding:14px 20px; font-size:14.5px; }
.spec-table th{ font-weight:600; color:var(--ink); background:var(--paper); width:40%; }
.spec-table td{ color:var(--ink-soft); }
.spec-pending{ font-family:'IBM Plex Mono'; font-size:12.5px; color:#8a9a92; }

/* Pending state — reused on Download buttons with no file yet */
.btn-pending{ opacity:0.5; cursor:not-allowed; pointer-events:none; }

/* WhatsApp floating action button — sitewide */
.whatsapp-float{ position:fixed; right:24px; bottom:24px; width:56px; height:56px; border-radius:50%; background:var(--green); display:flex; align-items:center; justify-content:center; box-shadow:0 8px 24px rgba(11,46,47,0.28); z-index:999; transition:transform .2s ease, box-shadow .2s ease; }
.whatsapp-float:hover{ transform:translateY(-4px); box-shadow:0 12px 28px rgba(11,46,47,0.34); }
.whatsapp-float svg{ width:26px; height:26px; }
@media (max-width:720px){ .whatsapp-float{ right:16px; bottom:16px; width:50px; height:50px; } .whatsapp-float svg{ width:24px; height:24px; } }

/* Footer */
footer{ background:var(--navy); color:rgba(255,255,255,0.75); padding:64px 0 28px; }
.footer-grid{ display:grid; grid-template-columns:1.4fr repeat(3,1fr); gap:40px; margin-bottom:48px; }
@media (max-width:800px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
/* Replaces the inline styles previously on the footer's logo/name block. */
.footer-brand{ display:flex; align-items:center; gap:10px; margin-bottom:16px; }
.footer-brand img{ width:46px; height:auto; object-fit:contain; }
.footer-brand-name{ font-family:'Poppins'; font-weight:700; font-size:20px; color:#fff; }
.footer-tagline{ font-size:14px; color:rgba(255,255,255,0.6); max-width:280px; }
footer h4{ color:#fff; font-size:14px; margin-bottom:16px; font-family:'Poppins'; }
footer ul{ list-style:none; display:flex; flex-direction:column; gap:10px; }
footer a{ font-size:14px; color:rgba(255,255,255,0.65); }
footer a:hover{ color:var(--lime); }
.footer-bottom{ border-top:1px solid rgba(255,255,255,0.12); padding-top:24px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:13px; color:rgba(255,255,255,0.5); }