/* ========= KORALI · Premium Redesign ========= */
:root{
  --bg:#faf8f4;
  --bg-2:#f1ede4;
  --ink:#0e0f0d;
  --ink-2:#2b2c28;
  --muted:#5e5d57;
  --line:rgba(14,15,13,.10);
  --brand:#1f3a2e;
  --brand-2:#2d5a44;
  --accent:#c9a96b;
  --accent-2:#b89456;
  --white:#fff;
  --radius:14px;
  --radius-lg:22px;
  --max:1240px;
  --shadow-sm:0 1px 2px rgba(0,0,0,.06);
  --shadow-md:0 8px 30px rgba(14,15,13,.10);
  --shadow-lg:0 24px 60px rgba(14,15,13,.18);
  --serif:"Fraunces",Georgia,serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --t:cubic-bezier(.2,.7,.2,1);
  /* Virtual Arc Software maker's mark — cool signal accent, distinct from the kraft brand */
  --vas-glow:#5bc7f0;
  --vas-glow-2:#8b6cf0;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--sans);
  background:var(--bg);
  color:var(--ink);
  line-height:1.55;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:transparent;color:inherit}

/* ===== Buttons ===== */
.btn{
  display:inline-flex;align-items:center;gap:.5em;
  padding:.95rem 1.4rem;border-radius:999px;
  font-weight:500;font-size:.95rem;letter-spacing:.01em;
  transition:transform .25s var(--t),background .25s var(--t),color .25s var(--t),box-shadow .25s var(--t);
  white-space:nowrap;
}
.btn-primary{background:var(--ink);color:var(--white)}
.btn-primary:hover{background:var(--brand);transform:translateY(-2px);box-shadow:var(--shadow-md)}
.btn-ghost{background:rgba(255,255,255,.10);color:#fff;border:1px solid rgba(255,255,255,.35);backdrop-filter:blur(6px)}
.btn-ghost:hover{background:rgba(255,255,255,.20);transform:translateY(-2px)}
.btn-dark{background:var(--ink);color:#fff;margin-top:1.2rem}
.btn-dark:hover{background:var(--brand);transform:translateY(-2px)}
.btn-lg{padding:1.2rem 2rem;font-size:1.05rem}

/* ===== NAV ===== */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;gap:2rem;
  padding:1rem 2rem;
  background:rgba(250,248,244,.72);
  backdrop-filter:saturate(160%) blur(14px);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid transparent;
  transition:background .3s var(--t),border-color .3s var(--t),padding .3s var(--t);
}
.nav.scrolled{padding:.7rem 2rem;background:rgba(250,248,244,.92);border-bottom-color:var(--line)}
.brand{display:flex;align-items:center;gap:.7rem}
.brand-mark{
  width:38px;height:38px;border-radius:10px;
  background:var(--ink);color:#fff;
  display:grid;place-items:center;
  font-family:var(--serif);font-weight:600;font-size:1.25rem;
  letter-spacing:.02em;
}
/* Real logo image (swapped in by js/constants.js when KORALI_CONST.logo is set).
   The swap preserves the old mark's classes, so .brand-logo must explicitly shed
   the .brand-mark box (dark background, rounded corners, fixed square size) — the
   wordmark is a transparent PNG and must never sit on a coloured plate. */
.brand-logo{
  height:34px;width:auto;display:block;object-fit:contain;
  background:none;border-radius:0;border:0;padding:0;
  /* In a column flex (footer-brand) a block img with width:auto stretches to the
     container and object-fit centres the logo in a too-wide box — pin to its own
     intrinsic width so it stays flush-left at its true size. */
  align-self:flex-start;flex:0 0 auto;max-width:100%;
}
.brand-text{display:flex;flex-direction:column;line-height:1;font-weight:600;letter-spacing:.05em;font-size:.95rem}
.brand-text small{font-weight:400;color:var(--muted);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;margin-top:4px}
/* When the wordmark logo is present, the standalone "KORALI" text is dropped and
   only the tagline remains beside the logo — pull it up so it sits centered. */
.brand-tagline{justify-content:center}
.brand-tagline small{margin-top:0}
/* Footer logo: the white wordmark on the dark footer (data-brand-logo="light"). */
.footer-brand .brand-logo{height:40px}
.nav-links{list-style:none;display:flex;gap:1.8rem;align-items:center}
.nav-links a{font-size:.92rem;color:var(--ink-2);position:relative;padding:.3rem 0}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--t)}
.nav-links a:hover{color:var(--ink)}
.nav-links a:hover::after{transform:scaleX(1)}
.nav-cta{display:inline-flex;align-items:center;background:var(--ink);color:#fff;padding:.7rem 1.1rem;border-radius:999px;font-size:.88rem;transition:transform .25s var(--t),background .25s var(--t)}
.nav-cta:hover{background:var(--brand);transform:translateY(-1px)}
.nav-toggle{display:none;flex-direction:column;gap:5px;width:30px}
.nav-toggle span{display:block;width:100%;height:2px;background:var(--ink);border-radius:2px;transition:transform .3s var(--t),opacity .3s var(--t)}
/* language toggle (shared with catalogue pages) */
.lang-toggle{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden;flex:0 0 auto}
.lang-toggle button{padding:.34rem .72rem;font-size:.74rem;font-weight:600;letter-spacing:.05em;color:var(--muted);background:transparent;transition:background .2s var(--t),color .2s var(--t)}
.lang-toggle button.active{background:var(--brand);color:#fff}
.lang-toggle button:hover:not(.active){color:var(--ink)}
@media (max-width:720px){.lang-toggle{margin-left:auto;margin-right:.4rem}}

/* ===== HERO ===== */
.hero{position:relative;min-height:100vh;color:#fff;display:flex;align-items:center;padding:9rem 2rem 5rem;overflow:hidden}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.55) saturate(1.05);transform:scale(1.04);opacity:0;transition:opacity 1.4s var(--t)}
.hero-img.active{opacity:1;animation:slowzoom 14s var(--t) infinite alternate}
@keyframes slowzoom{to{transform:scale(1.12)}}
.hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,15,13,.45) 0%,rgba(14,15,13,.25) 40%,rgba(14,15,13,.85) 100%)}
.hero-grain{position:absolute;inset:0;background:radial-gradient(circle at 20% 30%,rgba(201,169,107,.22),transparent 50%),radial-gradient(circle at 80% 70%,rgba(45,90,68,.25),transparent 50%);mix-blend-mode:screen;pointer-events:none}
.hero-inner{position:relative;z-index:2;max-width:var(--max);margin:0 auto;width:100%}
.hero-eyebrow{display:inline-flex;align-items:center;gap:.6rem;font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.22);padding:.55rem 1rem;border-radius:999px;backdrop-filter:blur(8px);margin-bottom:1.8rem}
.dot{width:8px;height:8px;border-radius:50%;background:#7bd49a;box-shadow:0 0 0 4px rgba(123,212,154,.25);animation:pulse 2s infinite}
@keyframes pulse{50%{box-shadow:0 0 0 8px rgba(123,212,154,0)}}
.hero-title{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(2.6rem,7vw,6rem);
  line-height:1.02;
  letter-spacing:-.02em;
  max-width:18ch;
  margin-bottom:1.5rem;
}
.hero-title em{font-style:italic;color:var(--accent);font-weight:300}
.hero-sub{font-size:clamp(1.05rem,1.4vw,1.2rem);max-width:60ch;color:rgba(255,255,255,.82);line-height:1.6;margin-bottom:2.5rem}
.hero-cta{display:flex;gap:1rem;flex-wrap:wrap;margin-bottom:4rem}
.hero-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;max-width:780px;border-top:1px solid rgba(255,255,255,.18);padding-top:2rem}
.hero-stats>div{display:flex;flex-direction:column;gap:.2rem}
.hero-stats strong{font-family:var(--serif);font-size:clamp(1.5rem,2.4vw,2.2rem);font-weight:500;color:var(--accent)}
.hero-stats span{font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.hero-scroll{position:absolute;left:50%;bottom:1.6rem;transform:translateX(-50%);z-index:2;color:#fff;font-size:1.3rem;opacity:.7;animation:bob 2.4s ease-in-out infinite}
@keyframes bob{50%{transform:translate(-50%,8px);opacity:1}}

/* ===== BAND ===== */
.band{background:var(--ink);color:#fff;padding:1.6rem 2rem}
.band-inner{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;align-items:center}
.band-item{display:flex;align-items:center;gap:.9rem;color:rgba(255,255,255,.85);font-size:.92rem}
.band-item img{width:32px;height:32px;object-fit:contain;filter:invert(1) brightness(1.4)}

/* ===== SECTION HEAD ===== */
.section-head{max-width:780px;margin:0 auto 4rem;text-align:center;padding:0 1rem}
.eyebrow{display:inline-block;font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:var(--brand-2);font-weight:500;margin-bottom:1rem}
.section-head h2{font-family:var(--serif);font-weight:400;font-size:clamp(2rem,4.2vw,3.4rem);line-height:1.05;letter-spacing:-.02em;margin-bottom:1.2rem}
.section-head h2 em{font-style:italic;color:var(--brand-2)}
.section-head p{color:var(--muted);font-size:1.05rem;max-width:60ch;margin:0 auto}

/* ===== CATEGORIES ===== */
.categories{padding:7rem 2rem 4rem;max-width:var(--max);margin:0 auto}
.cat-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}
.cat-card{position:relative;border-radius:var(--radius-lg);overflow:hidden;aspect-ratio:4/5;display:block;background:#222}
.cat-card img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--t);filter:brightness(.78)}
.cat-card:hover img{transform:scale(1.06)}
.cat-overlay{position:absolute;inset:auto 0 0 0;padding:2.4rem;color:#fff;background:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.75) 80%)}
.cat-tag{font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);font-weight:500}
.cat-overlay h3{font-family:var(--serif);font-size:clamp(1.6rem,2.6vw,2.4rem);font-weight:400;line-height:1.1;margin:.8rem 0 .6rem}
.cat-overlay p{color:rgba(255,255,255,.85);max-width:42ch;font-size:.98rem}
.cat-arrow{display:inline-block;margin-top:1rem;font-size:1.4rem;transition:transform .3s var(--t)}
.cat-card:hover .cat-arrow{transform:translateX(8px)}

/* ===== PRODUCTS ===== */
.products{padding:7rem 2rem;max-width:var(--max);margin:0 auto}
.prod-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem}
.prod{background:#fff;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);transition:transform .35s var(--t),box-shadow .35s var(--t)}
.prod:hover{transform:translateY(-6px);box-shadow:var(--shadow-md)}
.prod-img{aspect-ratio:4/3;background:var(--bg-2);overflow:hidden;display:grid;place-items:center}
.prod-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--t)}
.prod:hover .prod-img img{transform:scale(1.06)}
.prod h3{font-family:var(--serif);font-weight:500;font-size:1.25rem;padding:1.2rem 1.2rem .3rem;letter-spacing:-.01em;margin:0}
.prod p{color:var(--muted);font-size:.9rem;padding:0 1.2rem 1.4rem;line-height:1.5}

/* ===== CATALOG with TABS ===== */
.catalog{padding:7rem 2rem;max-width:var(--max);margin:0 auto;background:var(--bg)}
.tabs{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center;margin-bottom:3rem;padding-bottom:1.5rem;border-bottom:1px solid var(--line)}
.tab{
  padding:.7rem 1.2rem;border-radius:999px;
  background:transparent;color:var(--ink-2);
  font-size:.9rem;font-weight:500;
  border:1px solid var(--line);
  transition:background .2s,color .2s,border-color .2s,transform .2s;
}
.tab:hover{background:var(--bg-2);transform:translateY(-1px)}
.tab.active{background:var(--ink);color:#fff;border-color:var(--ink)}
.tab-panel{display:none;animation:fadeIn .35s var(--t)}
.tab-panel.active{display:block}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}}

.cat-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.cat-grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem}
.cat-item{
  background:#fff;border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--line);cursor:zoom-in;
  transition:transform .35s var(--t),box-shadow .35s var(--t);
}
.cat-item:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.cat-item img{aspect-ratio:4/3;width:100%;object-fit:contain;background:#fafaf8;padding:1.2rem;transition:transform .5s var(--t)}
.cat-item:hover img{transform:scale(1.04)}
.cat-item figcaption{
  padding:.9rem 1rem;font-size:.85rem;color:var(--ink-2);
  border-top:1px solid var(--line);
  font-weight:500;text-align:center;letter-spacing:.02em;
}

/* ===== SPLIT ===== */
.split{display:grid;grid-template-columns:1fr 1fr;gap:0;min-height:560px;background:var(--bg-2);align-items:stretch}
.split-media{position:relative;min-height:480px;overflow:hidden}
.split-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.split-text{padding:5rem 4rem;display:flex;flex-direction:column;justify-content:center;max-width:640px}
.split-text h2{font-family:var(--serif);font-weight:400;font-size:clamp(2rem,3.6vw,3rem);line-height:1.08;letter-spacing:-.02em;margin:.6rem 0 1.5rem}
.split-text p{color:var(--ink-2);font-size:1.05rem;margin-bottom:1.4rem}
.check{list-style:none;margin-top:.6rem}
.check li{padding:.7rem 0;border-top:1px solid var(--line);position:relative;padding-left:2rem;font-size:.98rem}
.check li::before{content:"";position:absolute;left:0;top:1.05rem;width:14px;height:8px;border-left:2px solid var(--brand-2);border-bottom:2px solid var(--brand-2);transform:rotate(-45deg)}

/* ===== PROCESS ===== */
.process{padding:7rem 2rem;max-width:var(--max);margin:0 auto}
.proc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;margin-bottom:3rem}
.step{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;position:relative;transition:transform .3s var(--t),box-shadow .3s var(--t)}
.step:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.step-num{position:absolute;top:1rem;left:1rem;z-index:2;font-family:var(--serif);font-size:1.2rem;font-weight:500;color:#fff;background:var(--ink);padding:.35rem .7rem;border-radius:8px;letter-spacing:.04em}
.step-img{aspect-ratio:4/3;overflow:hidden;background:#222}
.step-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--t);filter:brightness(.9)}
.step:hover .step-img img{transform:scale(1.06);filter:brightness(1)}
.step h3{font-family:var(--serif);font-weight:500;font-size:1.3rem;padding:1.2rem 1.2rem .4rem;margin:0;letter-spacing:-.01em}
.step p{padding:0 1.2rem 1.4rem;color:var(--muted);font-size:.92rem;line-height:1.5}

.install-strip{display:grid;grid-template-columns:repeat(5,1fr);gap:.8rem}
.install-strip img{aspect-ratio:4/3;width:100%;object-fit:cover;border-radius:var(--radius);transition:transform .4s var(--t),filter .4s var(--t);cursor:zoom-in;filter:saturate(.95)}
.install-strip img:hover{transform:scale(1.03);filter:saturate(1.1)}

/* ===== FACTORY ===== */
.factory{padding:7rem 2rem;background:var(--ink);color:#fff}
.factory-text{max-width:var(--max);margin:0 auto 3rem;text-align:center}
.factory-text .eyebrow{color:var(--accent)}
.factory-text h2{font-family:var(--serif);font-weight:400;font-size:clamp(2rem,4vw,3.2rem);line-height:1.05;letter-spacing:-.02em;margin:.6rem 0 1.2rem;color:#fff}
.factory-text h2 em{font-style:italic;color:var(--accent)}
.factory-text p{color:rgba(255,255,255,.78);max-width:60ch;margin:0 auto 1.4rem;font-size:1.05rem}
.factory-text .btn-dark{background:var(--accent);color:var(--ink)}
.factory-text .btn-dark:hover{background:#fff}
.factory-grid{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:240px;gap:1rem}
.factory-grid img{width:100%;height:100%;object-fit:cover;border-radius:var(--radius);transition:transform .5s var(--t),filter .5s var(--t);cursor:zoom-in;filter:saturate(.9) brightness(.95)}
.factory-grid img:hover{transform:scale(1.03);filter:saturate(1.1) brightness(1)}

/* Strip items that carry an (editable) caption — wrap img + hover label */
.strip-item{position:relative;overflow:hidden;border-radius:var(--radius);margin:0;display:block}
.strip-item img{display:block}
.strip-item .m-label{opacity:0;transform:translateY(8px)}
.strip-item:hover .m-label{opacity:1;transform:translateY(0)}
.factory-grid .strip-item{height:100%}
.factory-grid .strip-item img{width:100%;height:100%;object-fit:cover}
.install-strip .strip-item img{aspect-ratio:4/3;width:100%;object-fit:cover}

/* ===== PROJECTS MASONRY ===== */
.projects{padding:7rem 2rem;max-width:var(--max);margin:0 auto}
.masonry{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:200px;gap:1rem}
.m-item{position:relative;overflow:hidden;border-radius:var(--radius);background:#222}
.m-item img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--t)}
.m-item:hover img{transform:scale(1.08)}
.m-tall{grid-row:span 2}
.m-wide{grid-column:span 2}
.m-label{position:absolute;left:1rem;bottom:1rem;background:rgba(14,15,13,.75);color:#fff;padding:.45rem .85rem;border-radius:999px;font-size:.78rem;letter-spacing:.06em;backdrop-filter:blur(8px);opacity:0;transform:translateY(8px);transition:opacity .3s var(--t),transform .3s var(--t)}
.m-item:hover .m-label{opacity:1;transform:translateY(0)}

/* ===== QUOTES ===== */
.quotes{padding:7rem 2rem;background:var(--bg-2)}
.q-grid{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.q{background:#fff;padding:2.2rem;border-radius:var(--radius);border:1px solid var(--line);display:flex;flex-direction:column;gap:1.4rem;transition:transform .3s var(--t),box-shadow .3s var(--t)}
.q:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.q::before{content:"”";font-family:var(--serif);font-size:5rem;line-height:.5;color:var(--accent);margin-bottom:-.5rem}
.q blockquote{font-family:var(--serif);font-size:1.1rem;line-height:1.45;color:var(--ink-2);font-style:italic;font-weight:400}
.q figcaption{display:flex;flex-direction:column;gap:.2rem;border-top:1px solid var(--line);padding-top:1rem;margin-top:auto}
.q figcaption strong{font-weight:600;font-size:.95rem}
.q figcaption span{font-size:.82rem;color:var(--muted)}

/* ===== ABOUT ===== */
.about{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:0;padding:0}
.about-media{aspect-ratio:1/1;overflow:hidden}
.about-media img,.about-media video{width:100%;height:100%;object-fit:cover;display:block}
.about-text{padding:5rem 4rem;max-width:640px}
.about-text h2{font-family:var(--serif);font-weight:400;font-size:clamp(2rem,3.6vw,3rem);line-height:1.08;letter-spacing:-.02em;margin:.6rem 0 1.5rem}
.about-text h2 em{font-style:italic;color:var(--brand-2)}
.about-text p{color:var(--ink-2);margin-bottom:1.1rem;font-size:1.05rem}

/* ===== CERTS ===== */
.certs{padding:7rem 2rem;max-width:var(--max);margin:0 auto}
.cert-row{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem}
.cert{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:2rem;display:flex;flex-direction:column;align-items:center;gap:1rem;transition:transform .3s var(--t),box-shadow .3s var(--t)}
.cert:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.cert img{height:140px;object-fit:contain;filter:grayscale(1) contrast(1.05);transition:filter .3s var(--t)}
.cert:hover img{filter:grayscale(0)}
.cert span{font-weight:600;font-size:.95rem;letter-spacing:.04em}

.certs-note{text-align:center;color:var(--muted);font-size:.92rem;margin-top:2.4rem}
.certs-note a{color:var(--brand-2);font-weight:500;border-bottom:1px solid var(--brand-2)}

/* ===== LIGHTBOX ===== */
.lightbox{position:fixed;inset:0;z-index:80;background:rgba(14,15,13,.92);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;padding:4rem 2rem;animation:lbIn .25s var(--t)}
.lightbox[hidden]{display:none}
@keyframes lbIn{from{opacity:0}}
.lightbox img{max-width:100%;max-height:100%;object-fit:contain;border-radius:8px;box-shadow:var(--shadow-lg)}
.lb-close,.lb-nav{position:absolute;background:rgba(255,255,255,.10);color:#fff;border:1px solid rgba(255,255,255,.2);border-radius:50%;display:grid;place-items:center;transition:background .2s,transform .2s;backdrop-filter:blur(8px)}
.lb-close{top:1.5rem;right:1.5rem;width:44px;height:44px;font-size:1.5rem}
.lb-nav{top:50%;transform:translateY(-50%);width:52px;height:52px;font-size:2rem}
.lb-prev{left:1.5rem}.lb-next{right:1.5rem}
.lb-close:hover,.lb-nav:hover{background:rgba(255,255,255,.22);transform:translateY(-50%) scale(1.05)}
.lb-close:hover{transform:scale(1.05)}
.lb-cap{position:absolute;left:0;right:0;bottom:1.5rem;text-align:center;color:rgba(255,255,255,.85);font-size:.92rem;letter-spacing:.04em}

/* ===== CTA BIG ===== */
.cta-big{background:var(--ink);color:#fff;padding:8rem 2rem;text-align:center;position:relative;overflow:hidden}
.cta-big::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 30% 50%,rgba(201,169,107,.18),transparent 50%),radial-gradient(circle at 70% 50%,rgba(45,90,68,.25),transparent 60%)}
.cta-inner{position:relative;max-width:780px;margin:0 auto}
.cta-big h2{font-family:var(--serif);font-weight:400;font-size:clamp(2.4rem,5vw,4.2rem);line-height:1.05;letter-spacing:-.02em;margin-bottom:1.2rem}
.cta-big h2 em{font-style:italic;color:var(--accent)}
.cta-big p{color:rgba(255,255,255,.78);font-size:1.1rem;max-width:50ch;margin:0 auto 2.2rem}
.cta-big .btn-primary{background:var(--accent);color:var(--ink)}
.cta-big .btn-primary:hover{background:#fff}

/* ===== CONTACT ===== */
.contact{padding:7rem 2rem;max-width:var(--max);margin:0 auto}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:start}
.contact-info h2{font-family:var(--serif);font-weight:400;font-size:clamp(2rem,3.6vw,3rem);line-height:1.05;letter-spacing:-.02em;margin:.6rem 0 2rem}
.contact-list{list-style:none;display:flex;flex-direction:column;gap:.2rem}
.contact-list li{padding:1.2rem 0;border-top:1px solid var(--line);display:grid;grid-template-columns:140px 1fr;gap:1rem}
.contact-list li:last-child{border-bottom:1px solid var(--line)}
.contact-list strong{font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:500;padding-top:2px}
.contact-list a{color:var(--ink);font-weight:500;transition:color .2s}
.contact-list a:hover{color:var(--brand-2)}
.contact-phones{display:flex;flex-direction:column;gap:.35rem}
.contact-phones a{font-variant-numeric:tabular-nums}
.contact-form{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:2.4rem;display:flex;flex-direction:column;gap:1.1rem;box-shadow:var(--shadow-sm)}
.contact-form h3{font-family:var(--serif);font-weight:500;font-size:1.5rem;margin-bottom:.4rem}
.contact-form label{display:flex;flex-direction:column;gap:.4rem;font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:500}
.contact-form input,.contact-form select,.contact-form textarea{
  font:inherit;color:var(--ink);
  padding:.9rem 1rem;border:1px solid var(--line);border-radius:10px;
  background:var(--bg);
  font-size:1rem;text-transform:none;letter-spacing:0;
  transition:border-color .2s,background .2s;
}
.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{
  outline:none;border-color:var(--brand-2);background:#fff;
}
.contact-form .btn{align-self:flex-start;margin-top:.4rem}
.form-msg{color:var(--brand-2);font-weight:500;margin-top:.6rem;text-transform:none;letter-spacing:0}

/* ===== FOOTER ===== */
.footer{background:var(--ink);color:rgba(255,255,255,.7);padding:5rem 2rem 3rem}
.footer-inner{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:2fr 1fr 1fr 1.4fr;gap:3rem}
.footer-brand{display:flex;flex-direction:column;gap:1rem}
.footer-brand p{font-size:.88rem;line-height:1.7}
.footer-brand strong{color:#fff;font-weight:600}
.footer-col .foot-h{color:#fff;font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;margin-bottom:1.2rem;font-family:var(--sans)}
.footer-col a,.footer-col span{display:block;font-size:.92rem;padding:.3rem 0;color:rgba(255,255,255,.7);transition:color .2s}
.footer-col a:hover{color:var(--accent)}

/* ===== Maker's mark — Virtual Arc Software "arc signal" =====
   A luminous arc traces itself, a node pulses on its tip, and a shine sweep glides
   across the lockup. Cool cyan→violet accent, deliberately distinct from the kraft brand. */
.footer-bottom{margin:3.5rem -2rem -3rem;padding:1.35rem 2rem;border-top:1px solid rgba(255,255,255,.08);background:rgba(0,0,0,.22)}
.footer-bottom-inner{max-width:var(--max);margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:.6rem 1.5rem;flex-wrap:wrap}
/* homepage only: reserve space on the right so the mark clears the fixed chat bubble (catalogue pages have no chat widget) */
@media (min-width:641px){body:not([data-katalog]) .footer-bottom-inner{padding-right:9.5rem}}
.footer-legal{font-family:var(--sans);font-size:.8rem;line-height:1.5;color:rgba(255,255,255,.5)}
.vas-mark{position:relative;display:inline-flex;align-items:center;gap:.7rem;overflow:hidden;padding:.25rem;border-radius:10px;text-decoration:none}
.vas-mark:focus-visible{outline:2px solid var(--vas-glow);outline-offset:3px}
.vas-chip{position:relative;display:grid;place-items:center;width:38px;height:38px;flex:0 0 auto;border:1px solid rgba(255,255,255,.12);border-radius:8px;background:rgba(0,0,0,.25)}
.vas-chip-glow{position:absolute;inset:0;border-radius:8px;background:radial-gradient(closest-side,color-mix(in srgb,var(--vas-glow) 32%,transparent),transparent 75%);animation:vas-breathe 5.5s ease-in-out infinite}
.vas-svg{position:relative}
.vas-arc{stroke-dasharray:64;animation:vas-arc-draw 5.5s ease-in-out infinite}
.vas-node{transform-origin:center;transform-box:fill-box;animation:vas-node-pulse 5.5s ease-in-out infinite}
.vas-text{position:relative;display:flex;flex-direction:column;line-height:1.15}
.vas-label{font-family:var(--sans);font-size:.5625rem;font-weight:600;text-transform:uppercase;letter-spacing:.24em;color:rgba(255,255,255,.5)}
.vas-word{font-family:var(--mono);font-size:.875rem;font-weight:500;letter-spacing:.02em;color:rgba(255,255,255,.92);transition:color .3s var(--t)}
.vas-word-accent{color:var(--vas-glow)}
.vas-word-dim{color:rgba(255,255,255,.6)}
.vas-mark:hover .vas-word{color:var(--vas-glow)}
.vas-shine{position:absolute;top:0;bottom:0;width:34%;pointer-events:none;mix-blend-mode:screen;background:linear-gradient(100deg,transparent 0%,color-mix(in srgb,var(--vas-glow) 55%,transparent) 45%,color-mix(in srgb,var(--vas-glow-2) 45%,transparent) 60%,transparent 100%);animation:vas-shine 6s ease-in-out infinite}
@keyframes vas-arc-draw{0%{stroke-dashoffset:64}55%{stroke-dashoffset:0}100%{stroke-dashoffset:0}}
@keyframes vas-node-pulse{0%,45%{opacity:0;transform:scale(.4)}60%{opacity:1;transform:scale(1.15)}80%{opacity:.85;transform:scale(1)}100%{opacity:0;transform:scale(.7)}}
@keyframes vas-shine{0%{transform:translateX(-130%) skewX(-18deg);opacity:0}8%{opacity:.9}26%{opacity:0}100%{transform:translateX(230%) skewX(-18deg);opacity:0}}
@keyframes vas-breathe{0%,100%{opacity:.35}50%{opacity:.7}}
@media (max-width:640px){.footer-bottom-inner{justify-content:flex-start;text-align:left}}

/* ===== CHAT ===== */
.chat-bubble{
  position:fixed;right:1.6rem;bottom:1.6rem;z-index:60;
  display:inline-flex;align-items:center;gap:.6rem;
  background:var(--ink);color:#fff;
  padding:.85rem 1.2rem;border-radius:999px;
  box-shadow:var(--shadow-lg);
  font-size:.92rem;font-weight:500;
  transition:transform .25s var(--t),background .25s var(--t);
}
.chat-bubble:hover{background:var(--brand);transform:translateY(-3px) scale(1.02)}
.chat{
  position:fixed;right:1.6rem;bottom:1.6rem;z-index:61;
  width:min(380px,calc(100vw - 2rem));
  height:min(560px,calc(100vh - 2rem));
  background:#fff;border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);
  display:flex;flex-direction:column;overflow:hidden;
  border:1px solid var(--line);
  animation:chatIn .35s var(--t);
}
/* .chat uses display:flex, which overrides the [hidden] attribute's default
   display:none — so the panel must be explicitly hidden when closed (same fix
   the .lightbox rule already has). Without this, closing the chat does nothing
   and the hidden panel also blocks clicks on the bubble. */
.chat[hidden]{display:none}
@keyframes chatIn{from{opacity:0;transform:translateY(16px) scale(.96)}}
.chat-head{
  background:var(--ink);color:#fff;
  padding:1.1rem 1.2rem;display:flex;align-items:center;justify-content:space-between;
}
.chat-head strong{display:block;font-size:.98rem}
.chat-head small{color:rgba(255,255,255,.65);font-size:.78rem;display:flex;align-items:center;gap:.4rem;margin-top:.2rem}
.chat-head small::before{content:"";width:7px;height:7px;border-radius:50%;background:#7bd49a;box-shadow:0 0 0 3px rgba(123,212,154,.3)}
.chat-close{
  color:#fff;font-size:1.6rem;line-height:1;border-radius:8px;transition:background .2s;
  display:grid;place-items:center;width:38px;height:38px;flex:0 0 auto;
  cursor:pointer;background:transparent;border:none;position:relative;z-index:2;
}
.chat-close:hover{background:rgba(255,255,255,.12)}
.chat-close>*{pointer-events:none}
.chat-body{flex:1;overflow-y:auto;padding:1.2rem;display:flex;flex-direction:column;gap:.8rem;background:var(--bg)}
.msg{max-width:85%;padding:.8rem 1.05rem;border-radius:18px;font-size:.92rem;line-height:1.5;white-space:pre-wrap}
.msg.bot{background:#fff;border:1px solid var(--line);border-bottom-left-radius:6px;align-self:flex-start}
.msg.user{background:var(--ink);color:#fff;border-bottom-right-radius:6px;align-self:flex-end}
.msg.typing{display:inline-flex;gap:4px;align-items:center;background:#fff;border:1px solid var(--line)}
.msg.typing span{width:7px;height:7px;border-radius:50%;background:var(--muted);animation:dot 1.4s infinite}
.msg.typing span:nth-child(2){animation-delay:.2s}
.msg.typing span:nth-child(3){animation-delay:.4s}
@keyframes dot{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.6rem}
.chip{background:#fff;border:1px solid var(--line);border-radius:999px;padding:.5rem .85rem;font-size:.82rem;color:var(--ink-2);transition:background .2s,border-color .2s,color .2s}
.chip:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.chat-form{display:flex;align-items:center;gap:.6rem;padding:.8rem;background:#fff;border-top:1px solid var(--line)}
.chat-form input{flex:1;padding:.8rem 1rem;border:1px solid var(--line);border-radius:999px;font:inherit;background:var(--bg)}
.chat-form input:focus{outline:none;border-color:var(--brand-2);background:#fff}
.chat-form button{width:42px;height:42px;border-radius:50%;background:var(--ink);color:#fff;font-size:1.1rem;display:grid;place-items:center;transition:background .2s,transform .2s}
.chat-form button:hover{background:var(--brand);transform:scale(1.05)}

/* ===== RESPONSIVE ===== */
@media (max-width:1024px){
  .cat-grid{grid-template-columns:1fr}
  .prod-grid{grid-template-columns:repeat(2,1fr)}
  .masonry{grid-template-columns:repeat(3,1fr)}
  .q-grid{grid-template-columns:repeat(2,1fr)}
  .cert-row{grid-template-columns:repeat(2,1fr)}
  .footer-inner{grid-template-columns:1fr 1fr}
  .split,.about{grid-template-columns:1fr}
  .split-text,.about-text{padding:3.5rem 2rem}
  .band-inner{grid-template-columns:repeat(2,1fr)}
  .cat-grid-3,.cat-grid-4{grid-template-columns:repeat(3,1fr)}
  .proc-grid{grid-template-columns:repeat(2,1fr)}
  .install-strip{grid-template-columns:repeat(3,1fr)}
  .factory-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:200px}
}
@media (max-width:720px){
  .nav{padding:.9rem 1.2rem}
  .nav-links,.nav-cta{display:none}
  .nav-toggle{display:flex}
  .nav-links.open{display:flex;position:absolute;top:100%;left:0;right:0;background:var(--bg);padding:1.5rem;flex-direction:column;gap:1.2rem;border-bottom:1px solid var(--line)}
  .hero{padding:7rem 1.2rem 4rem;min-height:auto}
  .hero-stats{grid-template-columns:repeat(2,1fr);gap:1.4rem}
  .hero-cta{flex-direction:column;align-items:flex-start}
  .hero-cta .btn{width:100%;justify-content:center}
  .categories,.products,.projects,.quotes,.certs,.contact{padding:4.5rem 1.2rem}
  .cta-big{padding:5rem 1.2rem}
  .prod-grid{grid-template-columns:1fr 1fr;gap:1rem}
  .masonry{grid-template-columns:1fr 1fr;grid-auto-rows:140px}
  .m-wide{grid-column:span 2}
  .q-grid{grid-template-columns:1fr}
  .cert-row{grid-template-columns:1fr 1fr}
  .cat-grid-3,.cat-grid-4{grid-template-columns:repeat(2,1fr);gap:.8rem}
  .proc-grid{grid-template-columns:1fr}
  .install-strip{grid-template-columns:repeat(2,1fr);gap:.5rem}
  .factory-grid{grid-template-columns:1fr 1fr;grid-auto-rows:160px;gap:.6rem}
  .tabs{gap:.4rem}
  .tab{padding:.55rem .9rem;font-size:.82rem}
  .lb-nav{width:42px;height:42px;font-size:1.6rem}
  .contact-grid{grid-template-columns:1fr;gap:2.5rem}
  .contact-list li{grid-template-columns:1fr}
  .footer-inner{grid-template-columns:1fr 1fr;gap:2rem}
  .section-head{margin-bottom:2.5rem}
  .chat-bubble span{display:none}
  .chat-bubble{padding:.9rem}
}

/* Reveal on scroll */
[data-reveal]{opacity:0;transform:translateY(24px);transition:opacity .8s var(--t),transform .8s var(--t)}
[data-reveal].in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  .hero-img{animation:none}
}

/* ===== Katalozi (PDF download) ===== */
.catalogues{padding:6rem 1.5rem;background:var(--bg-2)}
.cat-dl-grid{max-width:880px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}
.cat-dl{display:flex;align-items:center;gap:1.2rem;background:var(--white);border:1px solid var(--line);border-radius:var(--radius-lg);padding:1.6rem 1.8rem;transition:transform .3s var(--t),box-shadow .3s var(--t)}
.cat-dl:hover{transform:translateY(-4px);box-shadow:var(--shadow-sm)}
.cat-dl-icon{flex:0 0 auto;width:52px;height:52px;border-radius:50%;background:var(--brand);color:var(--accent);display:grid;place-items:center;font-size:1.5rem}
.cat-dl-body{display:flex;flex-direction:column;gap:.3rem}
.cat-dl-body strong{font-size:1.05rem;color:var(--ink)}
.cat-dl-body small{color:var(--muted);font-size:.86rem}
.cat-dl-col{display:flex;flex-direction:column;gap:.7rem}
.cat-dl-col .cat-dl{flex:1}
.cat-dl-pdf{align-self:flex-start;font-size:.85rem;color:var(--muted);padding:.2rem;transition:color .2s}
.cat-dl-pdf:hover{color:var(--brand)}
@media (max-width:720px){.cat-dl-grid{grid-template-columns:1fr}}

/* ===== Product detail modal ===== */
.ci-more{display:block;margin-top:.3rem;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-2)}
.cat-item[data-details="1"]{cursor:pointer}
.pmodal{position:fixed;inset:0;z-index:85;background:rgba(14,15,13,.78);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;padding:2rem;animation:lbIn .25s var(--t)}
.pmodal[hidden]{display:none}
.pmodal-panel{position:relative;background:var(--bg);border-radius:var(--radius-lg);max-width:980px;width:100%;max-height:90vh;overflow:auto;display:grid;grid-template-columns:1.1fr 1fr;gap:0}
.pmodal-close{position:absolute;top:1rem;right:1rem;z-index:2;width:40px;height:40px;border-radius:50%;background:rgba(14,15,13,.08);font-size:1.4rem;display:grid;place-items:center;transition:background .2s}
.pmodal-close:hover{background:rgba(14,15,13,.16)}
.pmodal-media{padding:2rem;display:flex;flex-direction:column;gap:1rem;background:#fafaf8;border-radius:var(--radius-lg) 0 0 var(--radius-lg)}
.pmodal-media>img{width:100%;aspect-ratio:4/3;object-fit:contain;border-radius:var(--radius)}
.pmodal-thumbs{display:flex;gap:.6rem;flex-wrap:wrap}
.pmodal-thumbs img{width:64px;height:48px;object-fit:cover;border-radius:8px;cursor:pointer;opacity:.55;border:2px solid transparent;transition:opacity .2s,border-color .2s}
.pmodal-thumbs img.active,.pmodal-thumbs img:hover{opacity:1;border-color:var(--accent)}
.pmodal-info{padding:2.4rem 2.2rem;display:flex;flex-direction:column;gap:1.1rem}
.pmodal-top{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-right:3rem}
.pmodal-code{font-family:var(--mono);font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-2);font-weight:600}
.pmodal-lang{display:flex;border:1px solid var(--line);border-radius:999px;overflow:hidden}
.pmodal-lang button{padding:.35rem .9rem;font-size:.78rem;letter-spacing:.06em;color:var(--muted);transition:background .2s,color .2s}
.pmodal-lang button.active{background:var(--brand);color:var(--white)}
.pmodal-info h3{font-family:var(--serif);font-weight:400;font-size:1.7rem;line-height:1.15;letter-spacing:-.01em}
.pmodal-desc{color:var(--muted);line-height:1.65;font-size:.98rem;white-space:pre-line}
.pmodal-specs{border-collapse:collapse;width:100%;font-size:.92rem}
.pmodal-specs tr{border-bottom:1px solid var(--line)}
.pmodal-specs th{text-align:left;padding:.55rem 1rem .55rem 0;color:var(--ink-2);font-weight:600;white-space:nowrap;vertical-align:top}
.pmodal-specs td{padding:.55rem 0;color:var(--muted)}
@media (max-width:820px){
  .pmodal{padding:0}
  .pmodal-panel{grid-template-columns:1fr;max-height:100vh;border-radius:0}
  .pmodal-media{border-radius:0;padding:1.4rem}
  .pmodal-info{padding:1.6rem 1.4rem 2.4rem}
}

/* Catalogue filter rail — faceted search */
.filter-rail { display:flex; flex-wrap:wrap; gap:.75rem; align-items:center; margin:1rem 0 1.5rem; }
.filter-rail .filter-q, .filter-rail .filter-cat { padding:.5rem .75rem; border:1px solid #d4d4d4; border-radius:8px; font:inherit; }
.filter-rail .facet { display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; }
.filter-rail .facet-name { font-weight:600; font-size:.85rem; }
.filter-rail .facet-opt { display:inline-flex; gap:.25rem; align-items:center; font-size:.85rem; cursor:pointer; }
.filter-rail .filter-count { margin-left:auto; font-size:.85rem; color:#666; }
.filter-rail .facet-select { display:inline-flex; gap:.4rem; align-items:center; }
.filter-rail .facet-pick { padding:.35rem .5rem; border:1px solid #d4d4d4; border-radius:6px; font:inherit; }
.cat-empty { padding:2rem; text-align:center; color:#888; grid-column:1/-1; }