/* ============ TOKENS ============ */
  :root{
    --bg:#F6F3EC;
    --surface:#FFFFFF;
    --surface-2:#EEEAE0;
    --surface-deep:#0A2536;
    --ink:#0D2A3B;
    --ink-soft:#53656D;
    --ink-on-deep:#EAF3F1;
    --ink-soft-on-deep:#9FB9BC;
    --line:#DCD6C8;
    --line-on-deep:rgba(234,243,241,0.14);
    --accent:#146F6A;
    --accent-strong:#0E5854;
    --accent-on-deep:#57D8C9;
    --warm:#C97A54;
    --warm-soft:#F1DAC7;
    --warm-soft-on-deep:#2B2019;
    --shadow:0 1px 2px rgba(13,42,59,0.04), 0 12px 28px -14px rgba(13,42,59,0.18);
    --radius-s:10px; --radius-m:16px; --radius-l:26px;
    --maxw:1180px;
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --bg:#071A24;
      --surface:#0E2833;
      --surface-2:#12313D;
      --surface-deep:#04121A;
      --ink:#EAF3F1;
      --ink-soft:#9FB9BC;
      --line:rgba(234,243,241,0.12);
      --accent:#57D8C9;
      --accent-strong:#7EE8DA;
      --warm:#E8A079;
      --warm-soft:#2B2019;
      --shadow:0 1px 2px rgba(0,0,0,0.3), 0 20px 40px -20px rgba(0,0,0,0.6);
    }
  }
  :root[data-theme="dark"]{
    --bg:#071A24;
    --surface:#0E2833;
    --surface-2:#12313D;
    --surface-deep:#04121A;
    --ink:#EAF3F1;
    --ink-soft:#9FB9BC;
    --line:rgba(234,243,241,0.12);
    --accent:#57D8C9;
    --accent-strong:#7EE8DA;
    --warm:#E8A079;
    --warm-soft:#2B2019;
    --shadow:0 1px 2px rgba(0,0,0,0.3), 0 20px 40px -20px rgba(0,0,0,0.6);
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0; background:var(--bg); color:var(--ink);
    font-family:"IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
    font-size:16px; line-height:1.6;
    -webkit-font-smoothing:antialiased;
    /* Headless/sandboxed Chromium (and some real-world engines) can fail to paint
       flex children correctly when the UA auto-reverses the main axis for
       dir="rtl". We keep `direction` itself at ltr everywhere so that automatic
       reversal never triggers, and instead mirror the handful of places that
       need visual mirroring (below) explicitly via flex-direction/text-align. */
    direction:ltr;
  }
  html[dir="rtl"] body{text-align:right;}
  html[dir="rtl"] .nav-row{flex-direction:row-reverse;}
  h1,h2,h3,h4{
    font-family:"Fraunces", Georgia, serif;
    font-weight:500; line-height:1.08; letter-spacing:-0.01em;
    text-wrap:balance; margin:0; color:var(--ink);
  }
  em{font-style:italic; color:var(--accent);}
  p{margin:0;}
  a{color:inherit; text-decoration:none;}
  img{max-width:100%; display:block;}
  button{font-family:inherit; cursor:pointer;}
  .mono{font-family:"IBM Plex Mono", ui-monospace, monospace;}
  .eyebrow{
    font-family:"IBM Plex Mono", monospace; font-size:0.72rem; font-weight:500;
    letter-spacing:0.14em; text-transform:uppercase; color:var(--accent);
    display:flex; align-items:center; gap:0.55em;
  }
  .eyebrow::before{content:""; width:22px; height:2px; background:var(--accent); display:inline-block; border-radius:2px;}
  .wrap{max-width:var(--maxw); margin:0 auto; padding:0 clamp(20px,4vw,40px);}
  [hidden]{display:none !important;}
  .skip-link{position:absolute; left:-999px; top:0; background:var(--accent); color:#fff; padding:10px 16px; border-radius:0 0 8px 0; z-index:200;}
  .skip-link:focus{left:0;}
  :focus-visible{outline:2px solid var(--accent); outline-offset:3px;}
  @media (prefers-reduced-motion: reduce){ *{animation-duration:0.001ms !important; transition-duration:0.001ms !important;} }

  /* ============ NAV ============ */
  header.site-nav{
    position:sticky; top:0; z-index:100;
    background:color-mix(in srgb, var(--bg) 86%, transparent);
    backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
  }
  .nav-row{display:flex; align-items:center; justify-content:space-between; height:74px; gap:24px;}
  .brand{display:flex; align-items:center; gap:10px; font-family:"Fraunces",serif; font-weight:600; font-size:1.18rem; letter-spacing:-0.01em;}
  .brand small{display:block; font-family:"IBM Plex Mono",monospace; font-weight:400; font-size:0.56rem; letter-spacing:0.16em; color:var(--ink-soft); text-transform:uppercase; margin-top:-2px;}
  .brand-mark{width:42px; height:42px; flex-shrink:0; border-radius:50%; box-shadow:0 0 0 1px var(--line), 0 2px 8px rgba(13,42,59,0.18); background:#fff;}
  nav.primary{display:flex; align-items:center; gap:28px;}
  nav.primary a{font-size:0.86rem; font-weight:500; color:var(--ink-soft); padding:6px 0; border-bottom:2px solid transparent; transition:color .15s, border-color .15s;}
  nav.primary a:hover, nav.primary a.active{color:var(--ink); border-color:var(--accent);}
  .nav-cta{display:flex; align-items:center; gap:12px;}
  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    padding:12px 22px; border-radius:999px; font-size:0.86rem; font-weight:600;
    border:1px solid transparent; white-space:nowrap; transition:transform .15s ease, background .15s, box-shadow .15s, border-color .15s;
  }
  .btn:active{transform:scale(0.97);}
  .btn-primary{background:var(--accent); color:#04211E;}
  .btn-primary:hover{background:var(--accent-strong); box-shadow:0 8px 22px -8px var(--accent);}
  .btn-ghost{background:transparent; border-color:var(--line); color:var(--ink);}
  .btn-ghost:hover{border-color:var(--ink-soft);}
  .btn-on-deep{background:var(--accent-on-deep); color:#04211E;}
  .btn-on-deep:hover{filter:brightness(1.08);}
  .btn-ghost-on-deep{border-color:var(--line-on-deep); color:var(--ink-on-deep);}
  .btn-ghost-on-deep:hover{border-color:var(--ink-soft-on-deep);}
  .menu-toggle{display:none; background:none; border:1px solid var(--line); border-radius:8px; padding:8px 10px; color:var(--ink);}

  /* ============ LANGUAGE SWITCHER ============ */
  .lang-switch{position:relative;}
  .lang-switch-btn{display:inline-flex; align-items:center; gap:6px; background:none; border:1px solid var(--line); border-radius:999px; padding:9px 12px; font-size:0.8rem; font-weight:600; color:var(--ink);}
  .lang-switch-btn:hover{border-color:var(--ink-soft);}
  .lang-switch-btn .lang-flag{font-size:1rem; line-height:1;}
  .lang-switch-menu{position:absolute; top:calc(100% + 8px); right:0; z-index:120; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-m); box-shadow:var(--shadow); list-style:none; margin:0; padding:6px; max-height:min(360px, 70vh); overflow-y:auto; min-width:200px;}
  html[dir="rtl"] .lang-switch-menu{right:auto; left:0; text-align:right;}
  .lang-switch-menu[hidden]{display:none;}
  .lang-switch-menu li{margin:0;}
  .lang-switch-menu button{display:flex; align-items:center; gap:10px; width:100%; padding:9px 10px; border-radius:8px; background:none; border:none; text-align:left; font-size:0.86rem; color:var(--ink); font-family:inherit;}
  .lang-switch-menu button:hover{background:var(--surface-2);}
  .lang-switch-menu button[aria-selected="true"]{background:color-mix(in srgb, var(--accent) 12%, var(--surface)); font-weight:600;}
  .lang-switch-menu .lang-flag{font-size:1.05rem;}
  @media (max-width:480px){
    .lang-switch-btn{padding:7px 9px;}
  }

  @media (max-width:1080px){
    /* Switches to the hamburger nav well before the full desktop nav (7 links
       + CTA + language switcher) runs out of room — that gap used to sit
       between 880px and ~1040px, where the nav overflowed the viewport. */
    /* top/left/right + explicit height (not inset/bottom) because the header's
       backdrop-filter makes it the containing block for this fixed element —
       "bottom:0" would resolve against the header's own 74px box, collapsing
       the menu to zero height and leaving only unstyled overflow text visible. */
    nav.primary{position:fixed; top:74px; left:0; right:0; height:calc(100vh - 74px); overflow-y:auto; background:var(--bg); flex-direction:column; align-items:flex-start; padding:28px clamp(20px,4vw,40px); gap:6px; transform:translateY(-8px); opacity:0; pointer-events:none; transition:opacity .18s, transform .18s; z-index:150;}
    nav.primary a{width:100%; padding:12px 0; border-bottom:1px solid var(--line);}
    nav.primary.open{opacity:1; transform:translateY(0); pointer-events:auto;}
    .menu-toggle{display:inline-flex; flex-shrink:0;}
    .nav-cta{gap:8px;}
    .nav-cta .btn-ghost{display:none;}
  }
  @media (max-width:480px){
    .nav-row{gap:10px;}
    .brand small{display:none;}
    .brand{font-size:1.02rem; gap:8px;}
    .brand-mark{width:34px; height:34px;}
    .nav-cta{gap:6px;}
    .nav-cta .btn-primary{padding:8px 12px; font-size:0.74rem;}
    .menu-toggle{padding:8px;}
    #langSwitchCode{display:none;}
    .lang-switch-btn{padding:7px 8px;}
  }
  @media (max-width:360px){
    /* On very narrow phones the header's own "Request Demo" button is the
       first thing to go — the same CTA appears prominently further down on
       every page (hero, final section, distributor page), so nothing is
       actually lost, and the logo/language/menu row keeps its room to breathe. */
    .nav-cta .btn-primary{display:none;}
  }

  /* ============ VISION BANNER (opening eye-catcher) ============ */
  .vision-banner{position:relative; overflow:hidden; background:var(--surface-deep);}
  .vision-banner > img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;}
  .vision-banner::after{content:""; position:absolute; inset:0; z-index:0;
    background:linear-gradient(100deg, rgba(4,18,26,0.90) 0%, rgba(4,18,26,0.62) 40%, rgba(4,18,26,0.15) 72%, rgba(4,18,26,0.05) 100%);}
  .vision-content{position:relative; z-index:1; padding-top:clamp(56px,9vw,96px); padding-bottom:clamp(56px,9vw,96px); max-width:600px;}
  .vision-content .eyebrow{color:var(--accent-on-deep);}
  .vision-content .eyebrow::before{background:var(--accent-on-deep);}
  .vision-content h2{color:#fff; font-size:clamp(1.7rem,3.6vw,2.5rem); margin-top:14px; font-weight:500;}
  .vision-content p{color:rgba(234,243,241,0.86); margin-top:16px; font-size:1.02rem; line-height:1.65;}
  @media (max-width:640px){.vision-banner::after{background:linear-gradient(0deg, rgba(4,18,26,0.92) 30%, rgba(4,18,26,0.35) 75%, rgba(4,18,26,0.1) 100%);} .vision-content{max-width:100%;}}

  /* ============ HERO ============ */
  .hero{background:radial-gradient(120% 140% at 78% -10%, #123B4C 0%, var(--surface-deep) 55%, var(--surface-deep) 100%); color:var(--ink-on-deep); position:relative; overflow:hidden;}
  .hero::after{content:""; position:absolute; inset:0; background:
    radial-gradient(420px 420px at 88% 30%, color-mix(in srgb, var(--accent-on-deep) 20%, transparent), transparent 70%),
    radial-gradient(360px 360px at 95% 55%, color-mix(in srgb, var(--warm) 16%, transparent), transparent 70%);
    pointer-events:none;}
  .hero-grid{position:relative; z-index:1; display:grid; grid-template-columns:1.05fr 0.95fr; gap:clamp(24px,5vw,64px); align-items:center; padding:clamp(48px,7vw,88px) 0 clamp(40px,6vw,72px);}
  .hero h1{font-size:clamp(2.3rem,4.6vw,3.6rem); color:#fff; font-weight:500;}
  .hero-sub{margin-top:20px; font-size:1.08rem; color:var(--ink-soft-on-deep); max-width:46ch; line-height:1.65;}
  .hero-actions{display:flex; gap:14px; margin-top:32px; flex-wrap:wrap;}
  .hero-stats{display:flex; gap:clamp(20px,4vw,40px); margin-top:44px; flex-wrap:wrap;}
  .hero-stat b{display:block; font-family:"Fraunces",serif; font-size:1.7rem; font-weight:500; color:#fff;}
  .hero-stat span{font-size:0.78rem; color:var(--ink-soft-on-deep);}
  .hero-eyebrow{color:var(--accent-on-deep);}
  .hero-eyebrow::before{background:var(--accent-on-deep);}
  .hero-media{position:relative;}
  .hero-media .frame{border-radius:var(--radius-l); overflow:hidden; box-shadow:0 30px 70px -20px rgba(0,0,0,0.55); border:1px solid rgba(255,255,255,0.08);}
  .hero-media img{width:100%; height:auto; aspect-ratio:4/3; object-fit:cover;}
  .hero-badge{position:absolute; bottom:-22px; left:-22px; background:var(--surface); color:var(--ink); border-radius:var(--radius-m); padding:16px 20px; box-shadow:var(--shadow); display:flex; align-items:center; gap:12px; max-width:230px;}
  .hero-badge .dot{width:10px; height:10px; border-radius:50%; background:var(--accent); flex-shrink:0; box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 20%, transparent);}
  .hero-badge b{font-size:0.82rem; display:block;}
  .hero-badge span{font-size:0.72rem; color:var(--ink-soft);}
  @media (max-width:880px){
    .hero-grid{grid-template-columns:1fr;}
    .hero-media{order:-1;}
    .hero-badge{position:static; margin-top:16px; max-width:none;}
  }

  /* ============ TRUST BAR ============ */
  .trustbar{border-bottom:1px solid var(--line); background:var(--surface);}
  .trust-row{display:flex; flex-wrap:wrap; gap:clamp(20px,5vw,56px); align-items:center; justify-content:space-between; padding:22px 0; font-size:0.82rem; color:var(--ink-soft);}
  .trust-row strong{color:var(--ink); font-weight:600;}
  .trust-item{display:flex; align-items:center; gap:9px;}
  .trust-item svg{flex-shrink:0; color:var(--accent);}

  /* ============ SECTION RHYTHM ============ */
  section{padding:clamp(56px,9vw,108px) 0;}
  .section-head{max-width:640px; margin-bottom:clamp(32px,5vw,56px);}
  .section-head h2{font-size:clamp(1.7rem,3.2vw,2.5rem); margin-top:14px;}
  .section-head p{margin-top:14px; color:var(--ink-soft); font-size:1.02rem; max-width:56ch;}
  .band-deep{background:var(--surface-deep); color:var(--ink-on-deep);}
  .band-deep .section-head h2{color:#fff;}
  .band-deep .eyebrow{color:var(--accent-on-deep);}
  .band-deep .section-head p{color:var(--ink-soft-on-deep);}
  .band-alt{background:var(--surface-2);}

  /* ============ PROBLEM / COMPARE ============ */
  .compare-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(16px,3vw,28px);}
  .compare-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-l); overflow:hidden; box-shadow:var(--shadow);}
  .compare-card .tag{position:absolute; margin:16px; padding:7px 14px; border-radius:999px; font-size:0.68rem; font-weight:600; letter-spacing:0.06em; text-transform:uppercase;}
  .compare-media{position:relative; background:var(--surface-2); aspect-ratio:4/5;}
  .compare-media img{width:100%; height:100%; object-fit:contain; object-position:center;}
  .tag-old{background:#fff; color:#9A3B2C;}
  .tag-new{background:var(--accent); color:#04211E;}
  .compare-body{padding:22px 24px 26px;}
  .compare-body h3{font-family:"IBM Plex Sans"; font-weight:600; font-size:1.05rem;}
  .compare-body p{margin-top:8px; color:var(--ink-soft); font-size:0.92rem; line-height:1.55;}
  @media (max-width:760px){.compare-grid{grid-template-columns:1fr;}}

  /* ============ STEPS ============ */
  .steps{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px;}
  .step-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-m); overflow:hidden; box-shadow:var(--shadow); display:flex; flex-direction:column;}
  .step-media{aspect-ratio:4/3; overflow:hidden; background:var(--surface-2);}
  .step-media img{width:100%; height:100%; object-fit:contain; object-position:center;}
  .step-body{padding:18px 18px 22px; flex:1;}
  .step-num{font-family:"IBM Plex Mono",monospace; font-size:0.72rem; color:var(--accent); font-weight:500;}
  .step-body h3{font-size:1.02rem; font-weight:600; font-family:"IBM Plex Sans"; margin-top:8px;}
  .step-body p{font-size:0.86rem; color:var(--ink-soft); margin-top:6px; line-height:1.5;}
  @media (max-width:920px){.steps{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}}
  @media (max-width:560px){.steps{grid-template-columns:1fr;}}

  /* ============ FEATURE GRID ============ */
  .feature-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px;}
  .feature-card{padding:26px 24px; border-radius:var(--radius-m); background:var(--surface); border:1px solid var(--line);}
  .feature-card .k{font-family:"IBM Plex Mono",monospace; font-size:0.7rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--accent); font-weight:500;}
  .feature-card h3{font-family:"IBM Plex Sans"; font-size:1.08rem; font-weight:600; margin-top:10px;}
  .feature-card p{margin-top:8px; color:var(--ink-soft); font-size:0.9rem; line-height:1.55;}
  @media (max-width:880px){.feature-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}}
  @media (max-width:560px){.feature-grid{grid-template-columns:1fr;}}

  /* ============ PRODUCTS ============ */
  .product-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px;}
  .product-card{border-radius:var(--radius-l); overflow:hidden; background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow); display:flex; flex-direction:column;}
  .product-media{position:relative; aspect-ratio:4/3; background:var(--surface-deep); overflow:hidden;}
  .product-media img{width:100%; height:100%; object-fit:cover;}
  .product-media .size-tag{position:absolute; top:16px; left:16px; background:rgba(255,255,255,0.92); color:var(--ink); font-family:"IBM Plex Mono",monospace; font-size:0.78rem; font-weight:500; padding:6px 12px; border-radius:999px;}
  .product-body{padding:20px 22px 24px;}
  .product-body h3{font-family:"IBM Plex Sans"; font-weight:600; font-size:1.1rem;}
  .product-body .use{font-size:0.85rem; color:var(--accent); font-weight:500; margin-top:4px;}
  .product-body p{margin-top:10px; font-size:0.88rem; color:var(--ink-soft);}
  @media (max-width:880px){.product-grid{grid-template-columns:1fr;}}

  /* ============ COMPARISON TABLE ============ */
  .table-wrap{overflow-x:auto; border-radius:var(--radius-m); border:1px solid var(--line);}
  table.compare-table{width:100%; border-collapse:collapse; min-width:640px; background:var(--surface);}
  table.compare-table th, table.compare-table td{padding:16px 20px; text-align:left; font-size:0.9rem; border-bottom:1px solid var(--line);}
  table.compare-table thead th{font-family:"IBM Plex Mono",monospace; font-size:0.72rem; text-transform:uppercase; letter-spacing:0.06em; color:var(--ink-soft); background:var(--surface-2); font-weight:500;}
  table.compare-table thead th.hl{color:#04211E; background:var(--accent);}
  table.compare-table td.hl{background:color-mix(in srgb, var(--accent) 8%, var(--surface)); font-weight:600; color:var(--accent-strong);}
  table.compare-table tr:last-child td{border-bottom:none;}

  /* ============ EVIDENCE ============ */
  .evidence-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-bottom:34px;}
  .cert-card{background:var(--surface-2); border-radius:var(--radius-m); padding:22px; }
  :is(.band-deep) .cert-card{background:rgba(255,255,255,0.06); border:1px solid var(--line-on-deep);}
  .cert-card .big{font-family:"Fraunces",serif; font-size:2.2rem; color:var(--accent-on-deep); font-weight:500;}
  .cert-card b{display:block; font-size:0.86rem; margin-top:6px;}
  .cert-card span{font-size:0.78rem; color:var(--ink-soft-on-deep);}
  .quote-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:20px;}
  .quote-card{background:var(--surface); color:var(--ink); border-radius:var(--radius-m); padding:26px 26px 22px; position:relative;}
  .quote-card p.q{font-family:"Fraunces",serif; font-style:italic; font-size:1.12rem; line-height:1.5;}
  .quote-card .who{margin-top:16px; font-size:0.82rem; color:var(--ink-soft);}
  .quote-card .who b{color:var(--ink); font-weight:600;}
  @media (max-width:880px){.evidence-grid, .quote-grid{grid-template-columns:1fr;}}

  /* ============ AUDIENCE / VC ============ */
  .audience-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px;}
  .audience-card{border-radius:var(--radius-l); padding:28px 26px; border:1px solid var(--line); background:var(--surface); display:flex; flex-direction:column; gap:14px;}
  .audience-card .k{font-family:"IBM Plex Mono",monospace; font-size:0.7rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--accent);}
  .audience-card h3{font-size:1.3rem;}
  .audience-card p{color:var(--ink-soft); font-size:0.92rem; line-height:1.55; flex:1;}
  @media (max-width:880px){.audience-grid{grid-template-columns:1fr;}}
  @media (max-width:360px){.audience-card{padding:22px 18px;}}


  /* ============ FAQ ============ */
  .faq-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:14px 20px;}
  .faq-item{border:1px solid var(--line); border-radius:var(--radius-m); background:var(--surface); overflow:hidden;}
  .faq-q{width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 20px; background:none; border:none; text-align:left; font-family:"IBM Plex Sans"; font-weight:600; font-size:0.95rem; color:var(--ink);}
  .faq-q .plus{width:24px; height:24px; border-radius:50%; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; flex-shrink:0; position:relative; transition:transform .2s;}
  .faq-q .plus::before, .faq-q .plus::after{content:""; position:absolute; background:var(--accent);}
  .faq-q .plus::before{width:10px; height:2px;}
  .faq-q .plus::after{width:2px; height:10px; transition:transform .2s;}
  .faq-item[data-open="true"] .faq-q .plus::after{transform:scaleY(0);}
  .faq-a{max-height:0; overflow:hidden; transition:max-height .25s ease;}
  .faq-a p{padding:0 20px 20px; color:var(--ink-soft); font-size:0.9rem; line-height:1.6;}
  @media (max-width:760px){.faq-grid{grid-template-columns:1fr;}}

  /* ============ TEASERS (blog/haendler on home) ============ */
  .teaser-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px;}
  .teaser-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-m); padding:22px; display:flex; flex-direction:column; gap:10px; transition:border-color .15s, transform .15s;}
  .teaser-card:hover{border-color:var(--accent); transform:translateY(-2px);}
  .teaser-card .date{font-family:"IBM Plex Mono",monospace; font-size:0.72rem; color:var(--ink-soft);}
  .teaser-card h4{font-family:"IBM Plex Sans"; font-weight:600; font-size:1rem;}
  .teaser-card p{font-size:0.86rem; color:var(--ink-soft); line-height:1.5;}
  @media (max-width:880px){.teaser-grid{grid-template-columns:1fr;}}

  .split-teaser{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:32px; align-items:center;}
  @media (max-width:880px){.split-teaser{grid-template-columns:1fr;}}

  /* ============ FINAL CTA ============ */
  .final-cta{border-radius:var(--radius-l); background:var(--surface-deep); color:#fff; padding:clamp(36px,6vw,64px); display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:28px; position:relative; overflow:hidden;}
  .final-cta::before{content:""; position:absolute; inset:0; background:radial-gradient(320px 220px at 90% 20%, color-mix(in srgb, var(--accent-on-deep) 18%, transparent), transparent 70%); pointer-events:none;}
  .final-cta h2{color:#fff; font-size:clamp(1.6rem,3vw,2.1rem); max-width:20ch;}
  .final-cta .actions{display:flex; gap:14px; flex-wrap:wrap; position:relative; z-index:1;}

  /* ============ FOOTER ============ */
  footer{border-top:1px solid var(--line); padding:52px 0 32px; background:var(--surface);}
  .footer-grid{display:grid; grid-template-columns:1.4fr minmax(0,1fr) minmax(0,1fr) 1fr; gap:32px;}
  .footer-grid h5{font-family:"IBM Plex Mono",monospace; font-size:0.72rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--ink-soft); margin-bottom:14px;}
  .footer-grid a, .footer-grid p{display:block; font-size:0.86rem; color:var(--ink-soft); margin-bottom:9px;}
  .footer-grid a:hover{color:var(--accent);}
  .footer-bottom{margin-top:40px; padding-top:24px; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; font-size:0.78rem; color:var(--ink-soft);}
  @media (max-width:820px){.footer-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}}

  /* ============ BLOG PAGE ============ */
  .page-hero{padding:clamp(52px,8vw,84px) 0 clamp(28px,5vw,44px); background:var(--surface-deep); color:#fff;}
  .page-hero h1{color:#fff; font-size:clamp(2rem,4vw,2.9rem); overflow-wrap:break-word; word-break:break-word;}
  .page-hero p{color:var(--ink-soft-on-deep); margin-top:14px; max-width:56ch; font-size:1.02rem;}
  .blog-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px;}
  .post-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-m); padding:24px; display:flex; flex-direction:column; gap:12px; transition:transform .15s, border-color .15s;}
  .post-card:hover{transform:translateY(-3px); border-color:var(--accent);}
  .post-card .cat{font-family:"IBM Plex Mono",monospace; font-size:0.68rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--accent); margin-right:10px;}
  .post-card time{font-size:0.78rem; color:var(--ink-soft);}
  .post-card h3{font-size:1.15rem; margin-top:4px;}
  .post-card p{font-size:0.88rem; color:var(--ink-soft); line-height:1.55;}
  .post-card .read{margin-top:auto; font-size:0.82rem; font-weight:600; color:var(--accent); display:flex; align-items:center; gap:6px;}
  .post-card.featured{grid-column:span 2; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:22px; padding:0; overflow:hidden;}
  .post-card.featured .ft-media{background:var(--surface-deep); position:relative; overflow:hidden;}
  .post-card.featured .ft-media img{width:100%; height:100%; object-fit:cover; opacity:0.85;}
  .post-card.featured .ft-body{padding:26px 26px 26px 0; display:flex; flex-direction:column; gap:12px; justify-content:center;}
  @media (max-width:920px){.blog-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);} .post-card.featured{grid-column:span 2; grid-template-columns:1fr;} .post-card.featured .ft-media{aspect-ratio:16/9;} .post-card.featured .ft-body{padding:22px;}}
  @media (max-width:640px){.blog-grid{grid-template-columns:1fr;} .post-card.featured{grid-column:span 1;}}

  /* ============ HAENDLER / MAP PAGE ============ */
  .globe-panel{background:var(--surface-deep); border-radius:var(--radius-l); padding:clamp(20px,4vw,10px); overflow:hidden; position:relative; box-shadow:0 40px 70px -30px rgba(3,12,17,0.65), 0 14px 28px -14px rgba(3,12,17,0.5); perspective:1600px;}
  .globe-stage{transform:rotateX(4deg); transform-origin:50% 0%; transition:transform .3s;}
  @media (max-width:880px){.globe-stage{transform:none;}}
  .globe-svg{width:100%; height:auto; display:block;}
  .pin-active{--pin-color:#5FE0CF; --pin-text:#0A2E33;}
  .pin-building{--pin-color:#F0AE82; --pin-text:#3A1F0F;}
  .pin-dot{fill:var(--pin-color); filter:drop-shadow(0 0 6px color-mix(in srgb, var(--pin-color) 75%, transparent));}
  .pin-ring{fill:none; stroke:var(--pin-color); stroke-width:2; opacity:0.55;}
  .pin-leader{fill:none; stroke:var(--pin-color); stroke-width:1.4; opacity:0.5; stroke-dasharray:3 4;}
  .pin-pill{fill:var(--pin-color); opacity:0.97;}
  .pin-label{font-family:"IBM Plex Mono",monospace; font-size:15px; font-weight:700; fill:var(--pin-text);}
  .pin{cursor:pointer;}
  .pin:focus{outline:none;}
  .pin:focus .pin-ring, .pin:hover .pin-ring{stroke-width:3; opacity:0.9;}
  .pin.pin-open .pin-ring{stroke-width:3; opacity:1; r:16;}
  .pin.pin-open .pin-dot{r:8;}
  @media (max-width:640px){
    .pin-pill, .pin-label, .pin-leader{display:none;}
    .pin-dot{r:10;}
    .pin-ring{r:19;}
    .pin.pin-open .pin-ring{r:24;}
  }
  .map-tooltip{position:absolute; z-index:60; max-width:270px; background:var(--surface); color:var(--ink); border-radius:var(--radius-m); padding:18px 20px; box-shadow:0 24px 48px -16px rgba(3,12,17,0.55), 0 4px 16px rgba(3,12,17,0.25); font-family:"IBM Plex Sans",sans-serif;}
  .map-tooltip[hidden]{display:none;}
  .map-tooltip-close{position:absolute; top:8px; right:10px; width:24px; height:24px; border:none; background:none; color:var(--ink-soft); font-size:1.2rem; line-height:1; cursor:pointer; border-radius:50%;}
  .map-tooltip-close:hover{background:var(--surface-2); color:var(--ink);}
  .map-tooltip-status{font-family:"IBM Plex Mono",monospace; font-size:0.65rem; text-transform:uppercase; letter-spacing:0.06em; padding:3px 9px; border-radius:999px; display:inline-block; margin-bottom:8px;}
  .map-tooltip-status.status-active{background:color-mix(in srgb, var(--accent) 18%, var(--surface)); color:var(--accent-strong);}
  .map-tooltip-status.status-building{background:color-mix(in srgb, var(--warm) 22%, var(--surface)); color:var(--warm);}
  .map-tooltip h4{font-size:1.02rem; font-weight:600; margin:0 0 6px; padding-right:16px;}
  .map-tooltip #mtBody p{font-size:0.84rem; color:var(--ink-soft); line-height:1.5; margin:0 0 6px;}
  .map-tooltip #mtBody .mt-company{color:var(--ink); font-weight:600;}
  .map-tooltip #mtBody a{color:var(--accent); font-weight:600;}
  .map-hint{font-size:0.76rem; color:var(--ink-soft-on-deep); padding:10px clamp(20px,4vw,32px) 0; margin:0;}
  .legend{display:flex; gap:22px; flex-wrap:wrap; margin-top:18px; padding:0 clamp(20px,4vw,32px) 22px;}
  .legend-item{display:flex; align-items:center; gap:8px; font-size:0.8rem; color:var(--ink-soft-on-deep);}
  .legend-dot{width:10px; height:10px; border-radius:50%;}
  .country-search{display:flex; gap:10px; margin-bottom:24px;}
  .country-search input{flex:1; padding:14px 18px; border-radius:999px; border:1px solid var(--line); background:var(--surface); color:var(--ink); font-size:0.92rem; font-family:inherit;}
  .country-search input:focus{outline:none; border-color:var(--accent);}
  .country-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px;}
  .country-card{border:1px solid var(--line); border-radius:var(--radius-m); background:var(--surface); padding:20px; display:flex; gap:14px; align-items:flex-start;}
  .country-card .flag-badge{min-width:42px; height:42px; padding:0 6px; border-radius:10px; background:var(--surface-2); display:flex; align-items:center; justify-content:center; font-family:"IBM Plex Mono",monospace; font-weight:600; font-size:0.72rem; letter-spacing:-0.01em; color:var(--ink); flex-shrink:0; white-space:nowrap;}
  .country-card .status{font-family:"IBM Plex Mono",monospace; font-size:0.65rem; text-transform:uppercase; letter-spacing:0.06em; padding:3px 9px; border-radius:999px; display:inline-block; margin-bottom:6px;}
  .status-active{background:color-mix(in srgb, var(--accent) 18%, var(--surface)); color:var(--accent-strong);}
  .status-building{background:color-mix(in srgb, var(--warm) 22%, var(--surface)); color:var(--warm);}
  .country-card h4{font-size:0.98rem; font-weight:600; font-family:"IBM Plex Sans";}
  .country-card p{font-size:0.82rem; color:var(--ink-soft); margin-top:4px;}
  .country-card[hidden]{display:none;}
  .partner-pillars{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px;}
  @media (max-width:880px){.country-grid{grid-template-columns:1fr;} .partner-pillars{grid-template-columns:1fr;}}

  /* ============ WHITEPAPER PAGE ============ */
  .wp-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px;}
  .wp-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-l); padding:26px 26px 24px; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:10px;}
  .wp-card .cat{font-family:"IBM Plex Mono",monospace; font-size:0.68rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--accent); font-weight:600;}
  .wp-card h3{font-size:1.15rem; font-family:"IBM Plex Sans"; font-weight:600; margin-top:2px;}
  .wp-card .meta{font-size:0.82rem; color:var(--ink-soft);}
  .wp-card .abstract{font-size:0.9rem; color:var(--ink-soft); line-height:1.55; flex:1;}
  .wp-card .wp-actions{margin-top:8px;}
  .wp-more-note{margin-top:28px; display:flex; align-items:center; gap:10px; font-size:0.86rem; color:var(--ink-soft);}
  .wp-more-note::before{content:""; width:8px; height:8px; border-radius:50%; border:1.5px dashed var(--ink-soft); flex-shrink:0;}
  @media (max-width:760px){.wp-grid{grid-template-columns:1fr;}}


  /* ---------- Legal pages (Impressum/Datenschutz/AGB/Gebrauchsanweisung) ---------- */
  .legal-langs{display:flex; flex-wrap:wrap; gap:8px; margin-top:18px;}
  .legal-langs a{font-family:"IBM Plex Mono",monospace; font-size:0.76rem; letter-spacing:0.04em; padding:5px 12px; border-radius:999px; border:1px solid var(--line-on-deep); color:var(--ink-on-deep); text-decoration:none;}
  .legal-langs a.active{background:var(--accent); border-color:var(--accent); color:var(--surface-deep); font-weight:600;}
  .legal-langs a:not(.active):hover{background:rgba(255,255,255,0.08);}
  .legal-body{max-width:74ch; font-size:0.98rem; line-height:1.7; overflow-wrap:break-word; word-break:break-word;}
  .legal-body h2{font-family:"IBM Plex Sans"; font-size:1.28rem; font-weight:600; margin:2.1em 0 0.6em;}
  .legal-body h2:first-child{margin-top:0;}
  .legal-body h3{font-family:"IBM Plex Sans"; font-size:1.06rem; font-weight:600; margin:1.6em 0 0.5em;}
  .legal-body h4{font-family:"IBM Plex Sans"; font-size:0.96rem; font-weight:600; margin:1.3em 0 0.4em; color:var(--ink-soft);}
  .legal-body p{margin:0 0 1em;}
  .legal-body ul, .legal-body ol{margin:0 0 1em; padding-left:1.4em;}
  .legal-body li{margin-bottom:0.5em;}
  .legal-body ol{counter-reset:none;}
  .legal-body a{color:var(--accent); overflow-wrap:break-word; word-break:break-word;}
  .legal-body hr{border:none; border-top:1px solid var(--line); margin:2em 0;}
  .legal-body .note-inline, .legal-body .lang-note{background:var(--warm-soft); border:1px solid var(--warm); border-radius:12px; padding:14px 18px; font-size:0.86rem; color:var(--ink); margin:0 0 1.4em;}

  /* ---------- Blog article pages ---------- */
  .article-meta{display:flex; align-items:center; gap:12px; margin-top:14px; font-family:"IBM Plex Mono",monospace; font-size:0.78rem; letter-spacing:0.06em; text-transform:uppercase; color:var(--ink-soft-on-deep);}
  .article-meta .cat{color:var(--accent-on-deep); font-weight:600;}
  .article-body{max-width:70ch; font-size:1.04rem; line-height:1.75; overflow-wrap:break-word; word-break:break-word;}
  .article-body h3{font-family:"IBM Plex Sans"; font-size:1.18rem; font-weight:600; margin:1.7em 0 0.6em;}
  .article-body p{margin:0 0 1.15em;}
  .article-body ul{margin:0 0 1.15em; padding-left:1.4em;}
  .article-body li{margin-bottom:0.5em;}
  .article-body a{color:var(--accent); overflow-wrap:break-word; word-break:break-word;}
  .article-body .lang-note{background:var(--warm-soft); border:1px solid var(--warm); border-radius:12px; padding:12px 16px; font-size:0.86rem; margin:0 0 1.6em; color:var(--ink);}
  .article-back{display:inline-flex; align-items:center; gap:6px; font-size:0.9rem; color:var(--ink-soft); text-decoration:none; margin-bottom:8px;}
  .article-back:hover{color:var(--accent);}