/* ── CENTERING OVERRIDE ─────────────────────────────────────── */
/* Constrain full-width sections (header, hero, breadcrumb, footer) to a
   centred 1240px content column on wide viewports. Full-width backgrounds
   and the grid overlay on .ph remain edge-to-edge; only inner padding is
   widened so content centres. Uses !important to defeat inline styles that
   the 1:1 HTML templates carry. */
:root {
  --layout-max: 1240px;
  --layout-pad: max(48px, (100vw - var(--layout-max)) / 2);
}
.sh,
.bc,
.ph,
.sf,
#site-header,
.hero,
.services,
.manifesto,
.stats,
.site-footer {
  padding-left: var(--layout-pad) !important;
  padding-right: var(--layout-pad) !important;
}
.legal {
  padding-left: var(--layout-pad) !important;
  padding-right: var(--layout-pad) !important;
  max-width: none !important;
}
.legal > * { max-width: 860px; margin-left: auto; margin-right: auto; }

/* .wrap content column is already centred at 1080px — leave alone. */

@media (max-width: 768px) {
  .sh,
  .bc,
  .ph,
  .sf,
  .legal,
  #site-header,
  .hero,
  .services,
  .manifesto,
  .stats,
  .site-footer {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

/* ── LOGO: hide text brand instantly so there's no flash before JS replaces with image ── */
.sh-brand .or,
.sh-brand .sh-dot,
.sh-brand > span:not(:empty) {
  visibility: hidden;
  font-size: 0;
  width: 0;
  overflow: hidden;
}
/* Once JS inserts the img, make it visible */
.sh-brand img {
  visibility: visible !important;
  display: block !important;
}

/* ── AI REŠITVE — Global design system ──────────────────────── */
:root{
  --bg:#0B0B0A;--s1:#141412;--s2:#1C1C1A;--s3:#242422;
  --b1:#2A2A28;--b2:#3C3C38;
  --or:#D4601E;--orl:#F08040;--ord:#A84A16;
  --wx:#C4C0B4;--wl:#D4D0C4;
  --tx:#E8E4D8;--tm:#8C887E;--td:#8C887E;
  --ff:'Fraunces',serif;--fb:'Outfit',sans-serif;--fm:'JetBrains Mono',monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--tx);font-family:var(--fb);line-height:1.6;min-height:100vh;overflow-x:hidden}
a{color:var(--or);text-decoration:none}
a:hover{color:var(--orl)}
img{max-width:100%;height:auto;display:block}

/* ── HEADER ─────────────────────────────────────────────────── */
.sh{background:rgba(11,11,10,.95);backdrop-filter:blur(12px);border-bottom:1px solid var(--b1);
  padding:0 48px;display:flex;align-items:center;height:64px;gap:32px;
  position:sticky;top:0;z-index:500}
.sh-brand{font-family:var(--ff);font-size:20px;font-weight:700;letter-spacing:-.01em;
  color:var(--tx);display:flex;align-items:center;gap:8px}
.sh-brand .or{color:var(--or)}
.sh-dot{width:6px;height:6px;background:var(--or);flex-shrink:0}
.sh-nav{display:flex;gap:2px;margin-left:auto;align-items:center}
.sh-nav a{font-family:var(--fm);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--td);padding:8px 12px;transition:color .2s}
.sh-nav a:hover,.sh-nav a.active,.sh-nav a.current-menu-item{color:var(--tx)}
.sh-cta{font-family:var(--fm);font-size:10px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--tx);background:var(--or);
  padding:9px 16px;margin-left:8px;transition:background .2s;display:inline-block}
.sh-cta:hover{background:var(--orl);color:var(--tx)}

/* Mobile hamburger */
.sh-burger{display:none;background:none;border:1px solid var(--b1);color:var(--tx);
  width:36px;height:36px;cursor:pointer;margin-left:auto;align-items:center;justify-content:center;flex-direction:column;gap:4px}
.sh-burger span{width:16px;height:1px;background:var(--tx);transition:transform .2s,opacity .2s}
.sh-burger.open span:nth-child(1){transform:translateY(5px) rotate(45deg)}
.sh-burger.open span:nth-child(2){opacity:0}
.sh-burger.open span:nth-child(3){transform:translateY(-5px) rotate(-45deg)}

/* ── BREADCRUMB ─────────────────────────────────────────────── */
.bc{padding:14px 48px;border-bottom:1px solid var(--b1);
  font-family:var(--fm);font-size:9px;color:var(--td);letter-spacing:.1em;
  display:flex;gap:8px;align-items:center}
.bc a{color:var(--td)}
.bc a:hover{color:var(--or)}
.bc-sep{color:var(--b2)}

/* ── PAGE HERO ──────────────────────────────────────────────── */
.ph{padding:72px 48px 56px;border-bottom:1px solid var(--b1);position:relative;overflow:hidden}
.ph::before{content:'';position:absolute;inset:0;
  background-image:linear-gradient(rgba(42,42,40,.28) 1px,transparent 1px),
    linear-gradient(90deg,rgba(42,42,40,.28) 1px,transparent 1px);
  background-size:24px 24px;pointer-events:none}
.ph-kicker{font-family:var(--fm);font-size:10px;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--or);margin-bottom:16px;
  display:flex;align-items:center;gap:10px;position:relative}
.ph-kicker::before{content:'';width:20px;height:1px;background:var(--or)}
.ph h1{font-family:var(--ff);font-size:clamp(36px,5vw,68px);font-weight:700;
  line-height:1.05;letter-spacing:-.02em;color:var(--tx);position:relative;
  max-width:800px;margin-bottom:20px}
.ph h1 em{font-style:italic;color:var(--or)}
.ph-sub{font-family:var(--fb);font-size:18px;font-weight:300;color:var(--tm);
  max-width:600px;position:relative;line-height:1.65}
.px-tl{position:absolute;top:24px;left:24px;width:22px;height:22px;
  border-top:2px solid var(--or);border-left:2px solid var(--or)}
.px-br{position:absolute;bottom:24px;right:24px;width:22px;height:22px;
  border-bottom:2px solid var(--ord);border-right:2px solid var(--ord)}

/* ── LAYOUT ─────────────────────────────────────────────────── */
.wrap{max-width:1080px;margin:0 auto;padding:0 48px}
.section{padding:72px 0;border-bottom:1px solid var(--b1)}
.section:last-child{border-bottom:none}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}

/* ── SECTION HEADER ─────────────────────────────────────────── */
.sk{font-family:var(--fm);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--td);margin-bottom:14px;display:flex;align-items:center;gap:8px}
.sk::before{content:'';width:16px;height:1px;background:var(--b2)}
.sh2{font-family:var(--ff);font-size:clamp(28px,4vw,48px);font-weight:700;
  line-height:1.1;letter-spacing:-.01em;color:var(--tx);margin-bottom:48px}
.sh2 em{font-style:italic;color:var(--or)}

/* ── LEGAL ──────────────────────────────────────────────────── */
.legal{padding:64px 48px;max-width:860px;margin:0 auto}
.legal .meta{font-family:var(--fm);font-size:10px;color:var(--td);
  letter-spacing:.1em;text-transform:uppercase;padding:10px 14px;
  background:var(--s1);border:1px solid var(--b1);margin-bottom:48px;display:inline-block}
.legal h2{font-family:var(--ff);font-size:26px;font-weight:700;color:var(--tx);
  margin:44px 0 14px;letter-spacing:-.01em}
.legal h2:first-of-type{margin-top:0}
.legal h3{font-family:var(--ff);font-size:18px;font-weight:700;color:var(--tx);
  margin:26px 0 10px}
.legal p{font-family:var(--fb);font-size:15px;color:var(--tm);
  line-height:1.75;margin-bottom:14px}
.legal ul,.legal ol{font-family:var(--fb);font-size:15px;color:var(--tm);
  line-height:1.75;margin:0 0 14px 22px}
.legal li{margin-bottom:6px}
.legal strong{color:var(--tx);font-weight:600}
.legal table{width:100%;border-collapse:collapse;margin:20px 0}
.legal td,.legal th{padding:10px 14px;border:1px solid var(--b1);
  font-family:var(--fb);font-size:14px;color:var(--tm);text-align:left}
.legal th{background:var(--s1);color:var(--tx);font-weight:600}

/* ── CARDS ──────────────────────────────────────────────────── */
.card{background:var(--s1);border:1px solid var(--b1);padding:28px 24px;
  position:relative;transition:border-color .3s;display:block}
.card:hover{border-color:var(--b2)}
.card::before{content:'';position:absolute;top:0;left:0;width:3px;height:0;
  background:var(--or);transition:height .4s}
.card:hover::before{height:100%}
.card-num{font-family:var(--fm);font-size:10px;color:var(--td);
  letter-spacing:.12em;margin-bottom:16px}
.card h3{font-family:var(--ff);font-size:20px;font-weight:700;color:var(--tx);
  margin-bottom:10px;line-height:1.2}
.card h3 em{font-style:italic;color:var(--or)}
.card p{font-family:var(--fb);font-size:14px;color:var(--tm);
  line-height:1.65;margin-bottom:18px}
.card-lnk{font-family:var(--fm);font-size:10px;font-weight:500;
  color:var(--or);letter-spacing:.1em;text-transform:uppercase}

/* ── BUTTONS ────────────────────────────────────────────────── */
.btn{font-family:var(--ff);font-size:14px;font-weight:700;padding:13px 26px;
  cursor:pointer;display:inline-block;transition:background .2s,transform .1s;
  border:none;letter-spacing:.01em}
.btn:active{transform:scale(.98)}
.btn-p{background:var(--or);color:var(--tx)}
.btn-p:hover{background:var(--orl);color:var(--tx)}
.btn-o{background:transparent;color:var(--or);border:1px solid var(--or)}
.btn-o:hover{background:var(--or);color:var(--tx)}

/* ── FORM ───────────────────────────────────────────────────── */
.fl{font-family:var(--fm);font-size:9px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--td);display:block;margin-bottom:6px}
.fi,.fs,.ft{width:100%;background:var(--s2);border:1px solid var(--b1);
  color:var(--tx);font-family:var(--fb);font-size:14px;
  padding:11px 14px;display:block;transition:border-color .2s;outline:none}
.fi:focus,.fs:focus,.ft:focus{border-color:var(--or)}
.ft{resize:vertical;min-height:100px}
.fg{margin-bottom:18px}
.fr{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.fs option{background:var(--s2)}

/* ── BADGE ──────────────────────────────────────────────────── */
.badge{display:inline-block;font-family:var(--fm);font-size:9px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;padding:3px 9px;
  background:rgba(212,96,30,.1);color:var(--orl);border:1px solid rgba(212,96,30,.2)}
.badge-g{background:rgba(80,160,40,.08);color:#70C040;border-color:rgba(80,160,40,.2)}
.badge-n{background:rgba(42,42,40,.5);color:var(--td);border-color:var(--b1)}

/* ── PIXEL DIVIDER ──────────────────────────────────────────── */
.px-div{display:flex;gap:4px;margin:40px 0;align-items:center}
.px-div span{width:5px;height:5px;background:var(--b2)}
.px-div span:nth-child(5n+1){background:var(--ord)}

/* ── INFO BOX ───────────────────────────────────────────────── */
.info-box{background:var(--s1);border:1px solid var(--b1);border-left:3px solid var(--or);
  padding:20px 24px;margin:24px 0}
.info-box p{font-family:var(--fb);font-size:14px;color:var(--tm);line-height:1.65;margin:0}

/* ── FAQ ITEM ───────────────────────────────────────────────── */
.faq-item{border-bottom:1px solid var(--b1);padding:24px 0}
.faq-item:last-child{border-bottom:none}
.faq-q{font-family:var(--ff);font-size:20px;font-weight:700;color:var(--tx);
  margin-bottom:12px;cursor:pointer;display:flex;justify-content:space-between}
.faq-q::after{content:'+';color:var(--or);font-weight:400;transition:transform .2s}
.faq-item.open .faq-q::after{transform:rotate(45deg)}
.faq-a{font-family:var(--fb);font-size:14px;color:var(--tm);line-height:1.7;max-height:0;overflow:hidden;transition:max-height .3s ease}
.faq-item.open .faq-a{max-height:500px;padding-top:6px}

/* ── STEP ───────────────────────────────────────────────────── */
.step{display:flex;gap:24px;padding:32px 0;border-bottom:1px solid var(--b1)}
.step:last-child{border-bottom:none}
.step-num{font-family:var(--fm);font-size:10px;font-weight:700;color:var(--or);
  letter-spacing:.12em;flex-shrink:0;padding-top:4px;min-width:48px}
.step h3{font-family:var(--ff);font-size:22px;font-weight:700;color:var(--tx);
  margin-bottom:10px}
.step h3 em{font-style:italic;color:var(--or)}
.step p{font-family:var(--fb);font-size:14px;color:var(--tm);line-height:1.7}

/* ── PARTNER ────────────────────────────────────────────────── */
.partner{background:var(--s1);border:1px solid var(--b1);padding:24px;
  display:flex;flex-direction:column;gap:10px;transition:border-color .3s}
.partner:hover{border-color:var(--b2)}
.partner-name{font-family:var(--ff);font-size:16px;font-weight:700;color:var(--tx)}
.partner-role{font-family:var(--fm);font-size:9px;color:var(--or);
  letter-spacing:.12em;text-transform:uppercase}
.partner-desc{font-family:var(--fb);font-size:13px;color:var(--tm);line-height:1.6}

/* ── QUIZ / CALC ────────────────────────────────────────────── */
.quiz-step{display:none}
.quiz-step.active{display:block}
.quiz-opt{background:var(--s1);border:1px solid var(--b1);padding:16px 20px;
  margin-bottom:10px;cursor:pointer;transition:border-color .2s,background .2s;
  font-family:var(--fb);font-size:14px;color:var(--tm)}
.quiz-opt:hover{border-color:var(--or);color:var(--tx)}
.quiz-opt.selected{border-color:var(--or);background:rgba(212,96,30,.06);color:var(--tx)}
.quiz-progress{height:2px;background:var(--b1);margin-bottom:32px}
.quiz-bar{height:2px;background:var(--or);transition:width .4s}

/* ── MODEL-VIEWER ───────────────────────────────────────────── */
model-viewer{
  width:100%;height:520px;background:var(--s2);
  border:1px solid var(--b1);display:block
}
model-viewer::part(default-progress-bar){background:var(--or)}

/* ── FOOTER ─────────────────────────────────────────────────── */
.sf{padding:40px 48px;display:flex;justify-content:space-between;
  align-items:center;border-top:1px solid var(--b1);flex-wrap:wrap;gap:16px}
.sf-brand,.footer-brand{display:none !important}
.sf-links,.footer-links{display:flex;gap:20px;flex-wrap:wrap;margin-right:auto}
.sf-links a,.footer-links a{font-family:var(--fm);font-size:9px;color:var(--td);
  letter-spacing:.1em;text-transform:uppercase;transition:color .2s}
.sf-links a:hover,.footer-links a:hover{color:var(--or)}
.sf-copy,.footer-copy{font-family:var(--fm);font-size:9px;color:var(--td);margin-left:auto}

/* ── RESPONSIVE ─────────────────────────────────────────────── */
@media(max-width:900px){
  .g3,.g4{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:768px){
  .sh{padding:0 20px}
  .sh-nav{position:fixed;top:64px;left:0;right:0;background:var(--bg);
    border-bottom:1px solid var(--b1);flex-direction:column;gap:0;
    padding:8px 0;display:none;margin-left:0;z-index:499}
  .sh-nav.open{display:flex}
  .sh-nav a{padding:14px 20px;width:100%;font-size:11px;border-bottom:1px solid var(--b1)}
  .sh-nav a:last-child{border-bottom:none}
  .sh-cta{display:none}
  .sh-nav .sh-cta{display:block;background:var(--or);color:var(--tx);
    margin:8px 20px;text-align:center}
  .sh-burger{display:flex}
  .ph{padding:48px 20px 40px}
  .bc{padding:12px 20px}
  .wrap{padding:0 20px}
  .legal{padding:40px 20px}
  .g2,.g3,.g4{grid-template-columns:1fr}
  .fr{grid-template-columns:1fr}
  .sf{flex-direction:column;gap:16px;text-align:center;padding:32px 20px}
  .sf-links{justify-content:center}
  model-viewer{height:380px}
}

/* ══════════════════════════════════════════════════════════════
   ISSUE FIXES — April 2026
   ══════════════════════════════════════════════════════════════ */

/* FIX: Nav text bright by default — use --wx (#C4C0B4) for clear
   visibility without hover. Hover goes to full white --tx. */
.sh-nav a,
nav a {
  color: var(--wx) !important;
}
.sh-nav a:hover,
.sh-nav a.active,
.sh-nav a.current-menu-item,
nav a:hover,
nav a.active {
  color: var(--tx) !important;
}
/* Homepage nav too */
#site-header nav a {
  color: var(--wx) !important;
}
#site-header nav a:hover {
  color: var(--tx) !important;
}
/* CTA stays bright */
.sh-cta, .nav-cta {
  color: var(--tx) !important;
}

/* FIX: Kontakt — align right-side info blocks with form top
   Remove padding-top offset so E-MAIL block aligns with NAME field. */
.g2[style*="align-items:start"] > div:last-child {
  padding-top: 0 !important;
}

/* FIX: Mobile — logo 50% smaller, NO header CTA, simplified footer */
@media (max-width: 768px) {
  /* Prevent horizontal overflow */
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }
  /* Header: just logo, nothing else */
  .sh, #site-header {
    gap: 8px !important;
    padding: 0 12px !important;
  }
  /* Logo on mobile — must fit full canvas (124px at 2px blocks) */
  .sh-brand, #header-logo-wrap {
    flex-shrink: 1 !important;
    min-width: 0 !important;
    max-width: 145px !important;
    overflow: visible !important;
  }
  .sh-brand canvas, #header-canvas, #sh-logo-canvas {
    max-width: 145px !important;
    height: auto !important;
  }
  .sh-brand img {
    height: 18px !important;
  }
  .sh-dot { width: 4px !important; height: 4px !important; }
  /* REMOVE CTA button from header on mobile — everywhere */
  .sh-cta, .nav-cta {
    display: none !important;
  }
  /* Hide nav links by default on mobile (hamburger opens them) */
  .sh-nav, #site-header nav {
    display: none !important;
    position: fixed !important;
    top: 64px !important;
    left: 0 !important;
    right: 0 !important;
    background: #0B0B0A !important;
    border-bottom: 1px solid #2A2A28 !important;
    flex-direction: column !important;
    padding: 8px 0 !important;
    z-index: 499 !important;
  }
  /* When burger toggled open — this class overrides the display:none */
  .sh-nav.mobile-open,
  #site-header nav.mobile-open {
    display: flex !important;
  }
  .sh-nav a, #site-header nav a {
    display: block !important;
    padding: 14px 20px !important;
    width: 100% !important;
    font-size: 11px !important;
    color: #C4C0B4 !important;
    border-bottom: 1px solid #2A2A28 !important;
    text-decoration: none !important;
  }
  .sh-nav a:last-child, #site-header nav a:last-child {
    border-bottom: none !important;
  }
  .sh-burger { margin-left: auto !important; }
  /* Hero text: prevent overflow */
  .hero-h1, .ph h1 {
    font-size: clamp(32px, 8vw, 52px) !important;
    word-break: break-word !important;
  }
  .hero { padding: 48px 16px !important; }
  /* Footer — keep same as homepage on all pages */
  .sf-brand, .footer-brand { display: none !important; }
  .sf, .site-footer {
    flex-direction: column !important;
    gap: 12px !important;
    text-align: center !important;
    padding: 24px 16px !important;
  }
  .sf-links, .footer-links {
    justify-content: center !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
  }
  .sf-copy, .footer-copy { display: none !important; }
}
/* Homepage-specific mobile overrides (front-page uses #site-header, nav, .nav-cta) */
@media (max-width: 768px) {
  #site-header {
    padding: 0 12px !important;
    gap: 8px !important;
  }
  #site-header nav,
  #site-header .nav-cta,
  header .nav-cta,
  a.nav-cta {
    display: none !important;
  }
  #header-logo-wrap {
    max-width: 80px !important;
    overflow: hidden !important;
  }
  #header-canvas {
    max-width: 80px !important;
    height: auto !important;
  }
  /* Kill ALL horizontal overflow sources */
  .hero, .hero-inner, .services, .manifesto, .stats,
  .section, .wrap, .ph, .bc, .legal {
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }
  .hero-h1 {
    font-size: clamp(28px, 9vw, 48px) !important;
  }
  .hero-sub {
    font-size: 15px !important;
  }
  .hero-actions {
    flex-direction: column !important;
    align-items: flex-start !important;
  }
  .btn-primary {
    font-size: 13px !important;
    padding: 12px 22px !important;
    max-width: 100% !important;
  }
}
/* Extra small phones — keep logo full width (canvas is 124px at 2px blocks) */
@media (max-width: 400px) {
  .sh-brand, #header-logo-wrap {
    max-width: 145px !important;
    overflow: visible !important;
  }
  .sh-brand canvas, #header-canvas, #sh-logo-canvas {
    max-width: 145px !important;
  }
}

/* FIX: Legal pages — body text aligned with bullet lists.
   Bullets have margin-left:22px, so paragraphs get the same indent. */
.legal {
  text-align: left !important;
}
.legal p, .legal h2, .legal h3 {
  text-align: left !important;
  margin-left: 22px !important;
}
.legal ul, .legal ol {
  text-align: left !important;
  margin-left: 22px !important;
  padding-left: 18px !important;
}
.legal .meta {
  margin-left: 22px !important;
}
/* First element after meta doesn't need extra top margin */
.legal h2:first-of-type {
  margin-top: 0 !important;
}

/* FIX: Homepage stat banners text lighter — same as nav fix */
.stats .stat-val,
.stats .stat-lbl,
[style*="font-size:32px"],
[style*="font-size:10px"][style*="letter-spacing"] {
  color: var(--tm) !important;
}