/* ==========================================================================
   Sections — shared section-level building blocks used across pages
   ========================================================================== */

.section__head--row{ max-width:none; display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:20px; }
.split{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr); gap:clamp(32px,6vw,96px); align-items:center; }
.split--rev{ grid-template-columns:minmax(0,6fr) minmax(0,5fr); }
@media (max-width:900px){ .split, .split--rev{ grid-template-columns:1fr; } }

/* Sub-page hero */
.page-hero{ position:relative; min-height:min(92svh, 920px); display:grid; align-items:end; padding:calc(var(--header-h) + 64px) 0 clamp(56px, 8vw, 110px); overflow:hidden; isolation:isolate; }
.page-hero--short{ min-height:auto; padding-top:calc(var(--header-h) + clamp(72px, 10vw, 150px)); }
.page-hero__media{ position:absolute; inset:0; z-index:-2; overflow:hidden; }
.page-hero__media .ph, .page-hero__media picture, .page-hero__media img{ position:absolute; inset:0; aspect-ratio:auto; width:100%; height:100%; object-fit:cover; }
.page-hero__media::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(5,9,18,.35) 0%, rgba(5,9,18,.25) 40%, var(--page) 100%); }
.page-hero .plexus{ z-index:-1; }
.page-hero__inner{ display:grid; gap:24px; }
.page-hero h1{ max-width:16ch; }
.page-hero .lead{ max-width:58ch; }

/* Stats */
.stats{ list-style:none; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:1px; margin:56px 0 0; border:1px solid var(--line); border-radius:var(--r-3); overflow:hidden; background:var(--line); }
@media (max-width:900px){ .stats{ grid-template-columns:repeat(2,1fr); } }
.stat{ background:var(--ink-950); padding:28px 24px; display:grid; gap:10px; align-content:start; }
.stat b{ font:600 clamp(40px,4.4vw,64px)/1 var(--font-display); letter-spacing:-.03em; color:var(--text); font-variant-numeric:tabular-nums; }
.stat > .ti{ font-size:48px; color:var(--brand-bright); line-height:1; }
.stat__label{ color:var(--text-2); font-size:15px; }
.stat--icon.is-live .ti-building-bank{ animation:statRise 2.8s var(--ease-out) infinite; }
.stat--icon.is-live .ti-headset{ animation:statPulse 2.4s ease-in-out infinite; }
@keyframes statRise{ 0%,100%{ transform:translateY(0); } 40%{ transform:translateY(-6px); } }
@keyframes statPulse{ 0%,100%{ text-shadow:0 0 0 rgba(42,159,216,0); } 50%{ text-shadow:0 0 18px rgba(42,159,216,.8); } }

/* Department panels (P5) */
.p5{ padding-block:clamp(96px,10vw,140px); }
.p5__head{ margin-bottom:48px; display:grid; gap:18px; }
.p5__track{ padding-inline:var(--gutter); }
.dept{ width:min(78vw, 460px); min-height:min(64vh, 520px); display:grid; align-content:space-between; gap:24px; padding:clamp(24px,3vw,40px); border-radius:var(--r-4); background:linear-gradient(170deg, var(--ink-800), var(--ink-900)); border:1px solid var(--line); }
.dept__num{ font:600 clamp(72px,9vw,140px)/.85 var(--font-display); letter-spacing:-.05em; color:transparent; -webkit-text-stroke:1px rgba(255,255,255,.16); }
.dept .card__icon{ margin-bottom:18px; }
.dept p{ color:var(--text-2); margin-top:10px; }
.swiper .dept{ width:auto; min-height:360px; }

/* Feature cards: conic border sweep + icon micro-animations */
@property --sweep{ syntax:"<angle>"; inherits:false; initial-value:0deg; }
.feat-card{ display:grid; gap:14px; align-content:start; grid-template-rows:56px auto 1fr; transform-style:preserve-3d; }
.feat-card__icon{ margin-bottom:0 !important; }
.feat-card::before{
  content:""; position:absolute; inset:-1px; border-radius:inherit; padding:1px; pointer-events:none; opacity:0;
  background:conic-gradient(from var(--sweep), transparent 0 70%, var(--brand-bright) 85%, var(--cyan) 92%, transparent 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude;
  transition:opacity var(--dur-ui);
}
.feat-card:hover::before{ opacity:1; animation:sweep 2.4s linear infinite; }
@keyframes sweep{ to{ --sweep:360deg; } }
.feat-card__icon{ position:relative; margin-bottom:8px; }
.feat--wifi:hover .ti, .feat--wifi.is-live .ti{ animation:wifi 1.8s ease-in-out infinite; }
@keyframes wifi{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }
.feat--lang .feat-b{ position:absolute; opacity:0; }
.feat--lang:hover .feat-a, .feat--lang.is-live .feat-a{ animation:swapA 3.2s ease-in-out infinite; }
.feat--lang:hover .feat-b, .feat--lang.is-live .feat-b{ animation:swapB 3.2s ease-in-out infinite; }
@keyframes swapA{ 0%,40%{ opacity:1; transform:none; } 50%,90%{ opacity:0; transform:translateY(-6px); } 100%{ opacity:1; } }
@keyframes swapB{ 0%,40%{ opacity:0; transform:translateY(6px); } 50%,90%{ opacity:1; transform:none; } 100%{ opacity:0; } }
.feat--laptop:hover .ti, .feat--laptop.is-live .ti{ animation:statPulse 2.2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce){ .feat-card .ti, .stat .ti{ animation:none !important; } }

/* EVL teaser + charge ring */
.evl-teaser{ position:relative; overflow:hidden; isolation:isolate; padding-block:clamp(80px, 9vw, 140px); }
.evl-teaser__grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,6vw,96px); align-items:center; }
@media (max-width:900px){ .evl-teaser__grid{ grid-template-columns:1fr; } }
.charge{ position:relative; display:grid; place-items:center; padding:6%; }
.charge svg.ring{ position:absolute; inset:0; width:100%; height:100%; transform:rotate(-90deg); overflow:visible; }
.charge .ring circle{ fill:none; stroke-width:.8; }
.charge{ aspect-ratio:1; width:min(100%, 520px); justify-self:center; }
.charge .ph, .charge picture, .charge img{ display:block; width:100%; height:100%; border-radius:50%; object-fit:cover; object-position:30% 55%; }
.charge picture{ overflow:hidden; box-shadow:0 0 0 1px rgba(255,255,255,.06), 0 40px 80px -30px rgba(0,0,0,.9), 0 0 100px -30px rgba(81,255,140,.35); }

/* Post cards */
.post-card{ display:grid; border-radius:var(--r-4); overflow:hidden; background:var(--ink-800); border:1px solid var(--line); transition:border-color var(--dur-ui), transform var(--dur-ui) var(--ease-out); }
.post-card:hover{ border-color:var(--accent); transform:translateY(-4px); }
.post-card__media{ overflow:hidden; aspect-ratio:16/10; } /* same image height on every card, whatever the source ratio */
.post-card__media .ph, .post-card__media picture, .post-card__media img{ width:100%; height:100%; object-fit:cover; }
.post-card__media .shot img, .post-card__media .pic--top img{ object-position:top; } /* screenshots and key visuals: keep the header/headline, crop the bottom */
.post-card__media .ph, .post-card__media picture, .post-card__media img{ transition:transform 1.2s var(--ease-out); }
.post-card:hover .post-card__media .ph, .post-card:hover .post-card__media picture, .post-card:hover .post-card__media img{ transform:scale(1.05); }
.post-card__body{ display:grid; gap:12px; align-content:start; padding:clamp(22px,3vw,40px); }
.post-card__meta{ font-size:12.5px; letter-spacing:.08em; color:var(--cyan); text-transform:uppercase; }
.post-card__title{ font:600 clamp(28px,3.4vw,48px)/1.05 var(--font-display); letter-spacing:-.02em; }
.post-card .link-arrow{ margin-top:8px; }
.post-card--featured{ grid-template-columns:1.25fr 1fr; align-items:stretch; }
.post-card--featured .post-card__media{ aspect-ratio:auto; min-height:100%; }
.post-card--featured .post-card__body{ align-content:center; }
@media (max-width:900px){ .post-card--featured{ grid-template-columns:1fr; } .post-card--featured .post-card__media{ aspect-ratio:16/10; } }

/* Empty state */
.empty{ display:grid; justify-items:center; gap:14px; text-align:center; padding:clamp(48px,7vw,96px) 24px; border:1px dashed var(--line-strong); border-radius:var(--r-4); color:var(--text-2); }
.empty > .ti{ font-size:40px; color:var(--brand-bright); }
.empty h3{ color:var(--text); }

/* Check list (draws in) */
.checklist{ list-style:none; padding:0; margin:0; display:grid; gap:12px; }
.checklist li{ display:flex; gap:12px; align-items:center; font-size:17px; }
.checklist svg{ flex:none; width:26px; height:26px; }
.checklist circle{ fill:rgba(42,159,216,.12); stroke:rgba(42,159,216,.35); }
.checklist path{ fill:none; stroke:var(--brand-bright); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:20; stroke-dashoffset:0; }

/* Offer cards (numbered) */
.offer{ display:grid; gap:14px; align-content:start; }
.offer h3{ margin-top:8px; }

/* Long-form / legal */
.longform{ padding-top:calc(var(--header-h) + clamp(72px,10vw,140px)); }
.longform h1{ font-size:clamp(2.6rem, 5vw, 4.5rem); }
.longform h2{ font-size:clamp(1.5rem, 2.4vw, 2rem); margin-top:56px; }
.placeholder-block{ margin-top:18px; padding:22px 24px; border-radius:var(--r-2); border:1px dashed rgba(63,208,224,.35); background:rgba(63,208,224,.04); font:500 14px/1.6 var(--font-mono); color:var(--cyan); }

/* Pending-confirmation badge (spec data under review) */
.badge-todo{ display:inline-flex; align-items:center; gap:6px; margin-left:8px; padding:3px 8px; border-radius:999px; border:1px solid rgba(255,190,90,.45); color:#ffcf85; font:500 10.5px/1.2 var(--font-mono); letter-spacing:.06em; text-transform:uppercase; vertical-align:middle; white-space:nowrap; }

/* 404 */
.nf__inner{ display:grid; gap:22px; justify-items:start; }
.nf__code{ font-size:14px; letter-spacing:.3em; color:var(--cyan); }

/* Filter chips (Lösungen bento, 3D gallery) */
.filters{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:28px; }
.filter{ padding:10px 16px; border-radius:var(--r-pill); border:1px solid var(--line-strong); font:500 14px/1 var(--font-body); color:var(--text-2); transition:background-color var(--dur-ui), color var(--dur-ui), border-color var(--dur-ui); }
.filter:hover{ color:var(--text); border-color:var(--accent); }
.filter[aria-pressed="true"]{ background:var(--brand); border-color:var(--brand); color:#fff; }

/* innovdeHR shared: screenshot frame + roster-grid texture (HR page, products panel, home band) */
.hr-frame{ position:relative; border-radius:16px; overflow:hidden; background:#0A0D24; border:1px solid rgba(140,160,255,.18);
  box-shadow:0 30px 80px -30px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.02) inset; }
.hr-frame__bar{ display:flex; align-items:center; gap:6px; height:30px; padding:0 12px; background:rgba(255,255,255,.035); border-bottom:1px solid rgba(255,255,255,.06); }
.hr-frame__bar i{ width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.14); }
.hr-frame__bar i:first-child{ background:#ff5f57aa; } .hr-frame__bar i:nth-child(2){ background:#febc2eaa; } .hr-frame__bar i:nth-child(3){ background:#28c840aa; }
.hr-frame__bar span{ margin-left:10px; font:500 11px/1 var(--font-mono); letter-spacing:.08em; color:#7C88B0; }
.hr-frame__body{ position:relative; aspect-ratio:16/9; }
.hr-frame__body .pic, .hr-frame__body .pic img{ display:block; width:100%; height:100%; object-fit:cover; object-position:0 0; }

.hr-texture{ position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:linear-gradient(90deg, transparent 16px, var(--hr-page) 16px), linear-gradient(transparent 16px, var(--hr-page) 16px), linear-gradient(120deg, rgba(0,229,255,.16), rgba(14,56,255,.2) 50%, rgba(167,139,250,.12));
  background-size:22px 22px, 22px 22px, 100% 100%;
  -webkit-mask-image:radial-gradient(55% 70% at 78% 50%, #000, transparent 75%); mask-image:radial-gradient(55% 70% at 78% 50%, #000, transparent 75%); }
/* Product marks — innovdeERP and innovdeHR are shown the same way everywhere: the bare supplied logo
   (no backdrop) in front of the product name; in an eyebrow the logo replaces the dash. */
.hr-wordmark, .erp-wordmark{ display:inline-flex; align-items:center; gap:12px; }
.eyebrow.hr-wordmark::before, .eyebrow.erp-wordmark::before{ display:none; }
.hr-wordmark img, .erp-wordmark img{ flex:none; width:28px; height:28px; padding:0; border-radius:0; background:none; }
/* page-hero pill: logo · name · "Software by InnovDe" */
.product-eyebrow{ display:inline-flex; align-items:center; gap:10px; justify-self:start; padding:6px 14px 6px 6px; border-radius:var(--r-pill); }
.product-eyebrow img{ flex:none; width:28px; height:28px; }
.product-eyebrow span{ font:600 15px/1 var(--font-display); color:var(--text); }
.product-eyebrow small{ font:500 11px/1 var(--font-mono); letter-spacing:.14em; text-transform:uppercase; }
.product-eyebrow--erp{ border:1px solid rgba(94,201,229,.24); background:rgba(4,111,164,.12); }
.product-eyebrow--erp small{ color:#7FA6BF; }
.erp-ui--compact{ min-height:0; font-size:12px; }
.erp-ui--compact .erp-ui__kpi b{ font-size:15px; white-space:nowrap; }
.erp-ui--compact .erp-ui__table-wrap{ display:none; }
.btn--hr{ --btn-bg:var(--hr-grad); --btn-fg:#fff; box-shadow:0 10px 30px -12px rgba(14,56,255,.7); }

/* Home "Software" band — ERP + innovdeHR */
.sw-band{ position:relative; overflow:hidden; isolation:isolate; }
.sw-band__grid{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:18px; }
@media (max-width:1000px){ .sw-band__grid{ grid-template-columns:1fr; } }
.sw-card{ position:relative; isolation:isolate; overflow:hidden; display:grid; grid-template-rows:auto 1fr; gap:28px; padding:clamp(24px, 3vw, 40px); border-radius:var(--r-4); border:1px solid var(--line); }
.sw-card__copy{ display:grid; gap:16px; justify-items:start; }
.sw-card h3{ font:600 clamp(22px, 2.2vw, 30px)/1.18 var(--font-display); max-width:22ch; }
.sw-card__visual{ align-self:end; }
.sw-card--erp .sw-card__visual{ max-height:360px; overflow:hidden; -webkit-mask-image:linear-gradient(#000 70%, transparent); mask-image:linear-gradient(#000 70%, transparent); }
.sw-card--hr .hr-frame{ transform:perspective(1400px) rotateX(6deg); transform-origin:50% 100%; }
.sw-card--erp{ background:linear-gradient(160deg, rgba(4,111,164,.3), rgba(10,17,32,.92) 60%); }
.sw-card--hr{ background:linear-gradient(160deg, rgba(14,56,255,.32), rgba(7,10,31,.95) 60%); border-color:rgba(77,124,255,.32); }
.sw-card--hr .eyebrow{ color:var(--hr-cyan); }
.sw-card--hr .hr-texture{ -webkit-mask-image:radial-gradient(70% 60% at 80% 20%, #000, transparent 75%); mask-image:radial-gradient(70% 60% at 80% 20%, #000, transparent 75%); opacity:.7; }
.sw-card .erp-ui{ box-shadow:0 30px 60px -30px rgba(0,0,0,.9); }

/* ---- FAQ (faqBlock() in src/lib.mjs) — same build as the innovdeHR FAQ, in the site accent ---- */
.faq__grid{ display:grid; grid-template-columns:minmax(0,4fr) minmax(0,7fr); gap:clamp(32px, 5vw, 80px); align-items:start; }
.faq__grid .section__head{ position:sticky; top:calc(var(--header-h) + 32px); margin-bottom:0; }
@media (max-width:900px){ .faq__grid{ grid-template-columns:1fr; } .faq__grid .section__head{ position:static; } }
.faq__list{ display:grid; gap:10px; }
.qa{ border-radius:var(--r-2); border:1px solid var(--line); background:var(--ink-800); transition:border-color var(--dur-ui); }
.qa[open]{ border-color:color-mix(in srgb, var(--accent) 45%, transparent); }
.qa summary{ display:flex; align-items:center; justify-content:space-between; gap:20px; padding:20px 22px; cursor:pointer; list-style:none; font:600 17px/1.35 var(--font-display); }
.qa summary::-webkit-details-marker{ display:none; }
.qa summary i{ position:relative; flex:none; width:28px; height:28px; border-radius:50%; border:1px solid var(--line-strong); }
.qa summary i::before, .qa summary i::after{ content:""; position:absolute; left:50%; top:50%; width:10px; height:1.5px; translate:-50% -50%; background:var(--accent); transition:transform var(--dur-ui) var(--ease-out); }
.qa summary i::after{ transform:rotate(90deg); }
.qa[open] summary i::after{ transform:rotate(0deg); }
.qa summary:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; border-radius:var(--r-2); }
.qa__a{ padding:0 22px 22px; }
.qa__a p{ margin:0; color:var(--text-2); line-height:1.65; max-width:62ch; }
.qa__a a{ color:var(--accent); }