/* ============================================================================
   ZENITH HUB v2 — style.css  (HUB V2)
   Design system + dynamic background + liquid-glass + navbar + all sections.
   Business content lives in js/content.js. Cockpit styles live in pm-cockpit.css.
   ========================================================================== */

:root{
  --purple-300:#B9A6FF; --purple-400:#9B85FF; --purple-500:#7C5CFC;
  --purple-600:#6742E8; --purple-700:#4F30C4; --purple-glow:rgba(139,92,246,.45);
  --green-300:#7CF7D4;  --green-400:#4CF2C4;  --green-500:#00E6A8;
  --green-600:#00C794;  --green-glow:rgba(0,230,168,.4);
  --amber:#F5A623;      --cyan:#38D9F0;       --coral:#FF4D6D;
  --bg-deep:#0D0A24;    --bg-mid:#1A0F3D;      --bg-warm:#2A1664;
  --surface:rgba(255,255,255,.07);
  --border-soft:rgba(255,255,255,.14); --border-strong:rgba(255,255,255,.26);
  --text-0:#FFFFFF; --text-1:#E3E1F5; --text-2:#B8B4D9; --text-3:#8B85B8;
  --r-xl:32px; --r-lg:24px; --r-md:16px; --r-sm:10px;
  --shadow-soft:0 10px 40px rgba(20,10,50,.35);
  --shadow-hover:0 20px 60px rgba(124,92,252,.35);
  --shadow-green:0 16px 44px rgba(0,230,168,.3);
  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font);color:var(--text-1);line-height:1.6;
  background:linear-gradient(160deg,var(--bg-deep) 0%,var(--bg-mid) 45%,var(--bg-warm) 100%);
  background-attachment:fixed;min-height:100vh;overflow-x:hidden;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
img{max-width:100%;display:block}
ul{list-style:none}

.glass{background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.03));
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--border-soft);}
.glass-strong{background:rgba(30,16,66,.60);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--border-soft);}

.bg-layer{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.blob{position:absolute;border-radius:50%;filter:blur(120px);opacity:.55;will-change:transform;transform:translateZ(0);}
.blob--1{width:600px;height:600px;top:-140px;left:-120px;
  background:radial-gradient(circle at 35% 35%,var(--purple-500) 0%,rgba(124,92,252,.35) 40%,transparent 72%);animation:floatBlob 26s ease-in-out infinite;}
.blob--2{width:680px;height:680px;bottom:-180px;right:-160px;
  background:radial-gradient(circle at 42% 42%,var(--purple-600) 0%,rgba(103,66,232,.32) 42%,transparent 72%);animation:floatBlob 34s ease-in-out infinite reverse;}
.blob--3{width:520px;height:520px;top:38%;right:6%;opacity:.42;
  background:radial-gradient(circle at 50% 50%,var(--green-500) 0%,rgba(0,230,168,.28) 42%,transparent 72%);animation:floatBlob 22s ease-in-out infinite;}
@keyframes floatBlob{0%{transform:translate(0,0) scale(1)}33%{transform:translate(60px,-40px) scale(1.12)}66%{transform:translate(-40px,50px) scale(.94)}100%{transform:translate(0,0) scale(1)}}
.bg-mesh{position:absolute;inset:0;opacity:.35;background:radial-gradient(circle at 15% 20%,rgba(124,92,252,.12),transparent 35%),radial-gradient(circle at 85% 70%,rgba(0,230,168,.10),transparent 40%);}
.bg-layer::after{content:"";position:absolute;inset:-50%;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");mix-blend-mode:overlay;}

.pathway{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:0;transition:opacity 1.2s ease;}
.section.in-view .pathway{opacity:1}
.pathway-svg path{stroke-dasharray:14 10;animation:dashFlow 9s linear infinite;}
.pathway-svg path:nth-child(2){animation-duration:12s}
.pathway-svg path:nth-child(3){animation-duration:15s}
@keyframes dashFlow{to{stroke-dashoffset:-240}}

.navbar{position:fixed;top:18px;left:50%;transform:translateX(-50%);z-index:100;display:flex;align-items:center;gap:26px;
  padding:10px 14px 10px 18px;border-radius:999px;box-shadow:var(--shadow-soft);max-width:calc(100vw - 24px);}
.nav-brand{display:flex;align-items:center;gap:10px;padding-right:8px}
.nav-brand img{width:30px;height:30px;border-radius:8px}
.nav-wordmark{font-weight:800;letter-spacing:-.02em;font-size:13.5px;line-height:1.5;
  padding-bottom:1px;color:var(--text-0);white-space:nowrap}
.nav-wordmark b{color:var(--green-400);font-weight:800}
.nav-links{display:flex;gap:6px}
.nav-links a{padding:8px 16px;border-radius:999px;font-size:14px;font-weight:600;color:var(--text-2);transition:all .25s ease;white-space:nowrap;}
.nav-links a:hover{color:var(--text-0);background:rgba(255,255,255,.06)}
.nav-links a.active{color:#fff;background:linear-gradient(135deg,var(--green-500),var(--purple-500));box-shadow:0 6px 20px rgba(124,92,252,.4);}
.nav-toggle{display:none}

.section{position:relative;z-index:1;padding:96px 0;scroll-margin-top:100px;}
#overview{padding-top:46px;padding-bottom:60px}
.container{width:min(1240px,92vw);margin:0 auto;position:relative;z-index:2}

.eyebrow{display:inline-flex;align-items:center;gap:9px;padding:6px 14px;border-radius:999px;background:rgba(0,230,168,.10);
  border:1px solid rgba(0,230,168,.28);color:var(--green-300);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin-bottom:12px;}
.eyebrow .dot{width:8px;height:8px;border-radius:50%;background:var(--green-400);box-shadow:0 0 0 0 var(--green-glow);animation:pulseDot 2s infinite;}
@keyframes pulseDot{0%{box-shadow:0 0 0 0 rgba(0,230,168,.5)}70%{box-shadow:0 0 0 10px rgba(0,230,168,0)}100%{box-shadow:0 0 0 0 rgba(0,230,168,0)}}

.section-title{font-size:clamp(30px,4vw,46px);font-weight:800;letter-spacing:-.02em;color:var(--text-0);line-height:1.1;margin-bottom:14px;}
.section-subtitle{font-size:clamp(15px,1.6vw,18px);color:var(--text-2);max-width:640px}
.badge-new{display:inline-flex;align-items:center;padding:3px 10px;border-radius:999px;font-size:11px;font-weight:800;letter-spacing:.05em;background:var(--green-500);color:#062;box-shadow:0 0 16px var(--green-glow);}
.grad-text{background:linear-gradient(120deg,#fff 20%,var(--green-300) 55%,var(--purple-300) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;}
.support-cta svg,.role-arrow svg,.uc-arrow svg,.detail-back svg,.tl-arrow svg,.news-viewall svg,.news-item .chev svg,.crit-mag svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2}

/* ---- OVERVIEW ---- */
.overview-grid{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:32px;align-items:start;margin-top:8px;}
.hero{margin-bottom:12px}
.hero-logo-wrap{position:relative;display:inline-flex;margin-bottom:6px}
.hero-logo-wrap img{width:40px;height:40px;border-radius:12px;position:relative;z-index:2}
.hero-logo-wrap::after{content:"";position:absolute;inset:-11px;border-radius:50%;background:radial-gradient(circle,var(--purple-glow),transparent 70%);animation:pulseHalo 3s ease-in-out infinite;z-index:1;}
@keyframes pulseHalo{0%,100%{opacity:.6;transform:scale(1)}50%{opacity:1;transform:scale(1.15)}}
.hero-by{font-size:11.5px;color:var(--text-2);letter-spacing:.05em;margin-bottom:4px}
.hero-by b{color:var(--text-0);font-weight:800}
.hero h1{font-size:clamp(26px,3.6vw,42px);font-weight:800;letter-spacing:-.03em;line-height:1.18;
  padding-bottom:.08em;margin:2px 0 6px;}
.hero-tagline{font-size:clamp(14px,1.5vw,17px);color:var(--text-1);font-weight:600;margin-bottom:6px}
.hero-why{font-size:13px;color:var(--text-2);max-width:660px;line-height:1.45}

.eco-heading{font-size:11.5px;text-transform:uppercase;letter-spacing:.1em;color:var(--text-3);margin:0 0 8px;font-weight:700}
.eco-row{display:flex;gap:12px;flex-wrap:wrap}
.eco-chip{display:flex;align-items:center;gap:11px;padding:10px 14px;border-radius:var(--r-md);min-width:200px;flex:1;transition:transform .28s ease,box-shadow .28s ease;}
.eco-chip:hover{transform:translateY(-6px);box-shadow:var(--shadow-hover)}
.eco-logo-box{width:38px;height:38px;border-radius:10px;background:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0;padding:6px;}
.eco-logo-box img{max-height:24px;width:auto;object-fit:contain}
.eco-name{font-weight:800;color:var(--text-0);font-size:14.5px}
.eco-scope{font-size:11.5px;color:var(--text-2)}

.news-card{border-radius:var(--r-xl);padding:22px;position:sticky;top:96px;z-index:5}
.news-card h3{font-size:15px;letter-spacing:.05em;color:var(--text-0);margin-bottom:14px;display:flex;align-items:center;gap:8px}
.news-item{display:block;width:100%;text-align:left;padding:14px 0;border-bottom:1px solid var(--border-soft);position:relative;cursor:pointer;}
.news-item:last-of-type{border-bottom:none}
.news-meta{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.news-date{font-size:12px;color:var(--text-3)}
.news-item h4{font-size:14.5px;color:var(--text-1);font-weight:700;line-height:1.3;padding-right:22px}
.news-item p{font-size:13px;color:var(--text-3);margin-top:3px}
.news-item .chev{position:absolute;right:0;top:16px;color:var(--text-3);transition:transform .3s;display:inline-flex}
.news-item.open .chev{transform:rotate(90deg);color:var(--green-400)}
.news-item:hover .chev{color:var(--green-400)}
.news-details{display:none}
.news-item.open .news-details{display:block;margin-top:10px}
.news-details-inner{font-size:13px;color:var(--text-2);line-height:1.55;padding:12px 14px;border-radius:var(--r-md);background:rgba(255,255,255,.04);border:1px solid var(--border-soft)}
.news-details-inner a{display:inline-flex;align-items:center;gap:5px;margin-top:8px;color:var(--green-400);font-weight:700}
.news-viewall{display:inline-flex;align-items:center;gap:6px;margin-top:14px;color:var(--green-400);font-weight:700;font-size:13.5px;white-space:nowrap}
/* Collapsible news panel */
.news-handle{position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:40;
  display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px 8px;
  border-radius:var(--r-md) 0 0 var(--r-md);border-right:none;color:var(--text-2);
  box-shadow:var(--shadow-soft);transition:color .2s ease,padding .2s ease}
.news-handle:hover{color:var(--text-0);padding-right:12px}
.news-handle-text{writing-mode:vertical-rl;letter-spacing:.18em;font-size:11px;font-weight:800}
.news-handle-count{display:flex;align-items:center;justify-content:center;width:20px;height:20px;
  border-radius:50%;background:var(--green-500);color:#062;font-size:11px;font-weight:800}
.news-handle-chev{display:inline-flex;transition:transform .3s ease}
.news-handle-chev svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2}
.overview-grid.news-collapsed .news-handle-chev{transform:rotate(180deg)}

.overview-grid .news-card{transition:opacity .3s ease,transform .35s ease}
.overview-grid.news-collapsed{grid-template-columns:minmax(0,1fr)}
.overview-grid.news-collapsed .news-card{display:none}

@media (max-width:1000px){.news-handle{display:none}}
/* No published news → the overview spans the full width, no empty column */
.overview-grid.no-news{grid-template-columns:minmax(0,1fr)}

/* ---- TIMELINE ---- */
.timeline-wrap{margin-top:6px;min-width:0;max-width:100%}
.overview-main{min-width:0}
.tl-eyebrow{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--text-3);font-weight:700;margin-bottom:8px}
.timeline-head{display:flex;align-items:center;justify-content:center;gap:16px;margin-bottom:2px}
.tl-month-name{font-size:clamp(19px,2.2vw,26px);font-weight:700;letter-spacing:-.02em;color:var(--text-0);min-width:170px;text-align:center}
.tl-arrow{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--text-2);border:1px solid var(--border-soft);background:rgba(255,255,255,.03);transition:all .25s ease;}
.tl-arrow:hover:not(:disabled){background:rgba(255,255,255,.10);transform:scale(1.06);color:#fff;border-color:var(--border-strong)}
.tl-arrow:disabled{opacity:.2;cursor:not-allowed}
.tl-pagination{text-align:center;color:var(--text-3);font-size:11px;letter-spacing:.14em;margin-bottom:4px;text-transform:uppercase}
.tl-pagination b{color:var(--green-300)}
.tl-viewport{position:relative}
.tl-month{position:relative;padding:6px 0 2px;animation:tlFade .5s ease;}
@keyframes tlFade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.tl-line{position:absolute;left:3%;right:3%;top:58px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--purple-500) 0%,var(--purple-400) 45%,var(--green-500) 100%);}
.tl-line::after{content:"";position:absolute;right:-2px;top:50%;transform:translateY(-50%);border-left:9px solid var(--green-500);border-top:5px solid transparent;border-bottom:5px solid transparent}
.tl-mainrow{
    position:relative;
    display:flex;
    justify-content:space-around;
    align-items:flex-start;
    gap:4px;
}
.tl-event{
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    cursor:pointer;
    flex:1 1 0;
    min-width:0;
    max-width:128px;
}
.tl-icon{height:38px;display:flex;align-items:flex-end;justify-content:center;color:var(--purple-300);transition:transform .25s ease,color .2s ease}
.tl-icon svg{width:clamp(18px,1.7vw,24px);height:clamp(18px,1.7vw,24px);stroke:currentColor;fill:none;stroke-width:1.5}
.tl-nodeslot{height:24px;display:flex;align-items:center;justify-content:center;position:relative;z-index:2}
.tl-node{width:13px;height:13px;border-radius:50%;background:var(--bg-mid);border:2px solid var(--purple-400);transition:transform .25s cubic-bezier(.34,1.56,.64,1),box-shadow .25s ease}
.tl-meta{margin-top:6px;text-align:center;width:100%;min-width:0}
.tl-date{font-size:clamp(8.5px,.8vw,10.5px);color:var(--text-3);font-weight:700;letter-spacing:.03em;
  margin-bottom:2px;text-transform:uppercase;white-space:nowrap}
.tl-label{font-size:clamp(9px,.92vw,11.5px);color:var(--text-2);font-weight:600;line-height:1.3;
  max-width:100%;padding:0 3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  transition:color .2s}
.tl-event:hover,.tl-event:focus-visible{z-index:70}
.tl-event:hover .tl-icon{transform:translateY(-2px)}
.tl-event:hover .tl-node{transform:scale(1.35);box-shadow:0 0 0 5px rgba(124,92,252,.16)}
.tl-event:hover .tl-label{color:var(--text-0)}
.tl-event.demo .tl-icon{color:var(--purple-300)} .tl-event.demo .tl-node{border-color:var(--purple-400)}
.tl-event.workshop .tl-icon{color:var(--cyan)} .tl-event.workshop .tl-node{border-color:var(--cyan)}
.tl-event.workshop:hover .tl-node{box-shadow:0 0 0 5px rgba(56,217,240,.16)}
.tl-event.golive .tl-node{width:30px;height:30px;border:none;color:#04382a;background:radial-gradient(circle at 50% 38%,#4dffcf,var(--green-500));box-shadow:0 0 22px var(--green-glow);display:flex;align-items:center;justify-content:center}
.tl-event.golive .tl-node svg{width:13px;height:13px;fill:currentColor;stroke:none;margin-left:1px}
.tl-event.golive:hover .tl-node{transform:scale(1.12);box-shadow:0 0 30px var(--green-glow)}
.tl-event.golive .tl-label{color:var(--green-300)}
.tl-event.tbd{opacity:.5}
.tl-event.tbd .tl-node{border-style:dashed}
.tl-event.tbd:hover{opacity:.9}
.tl-subrow{position:relative;display:flex;justify-content:space-around;gap:16px;margin-top:26px;padding-top:26px;}
.tl-subrow::before{content:"";position:absolute;left:3%;right:3%;top:37px;border-top:2px dashed rgba(245,166,35,.5)}
.tl-subrow-label{position:absolute;top:2px;left:0;font-size:10.5px;letter-spacing:.14em;color:var(--amber);font-weight:700;text-transform:uppercase;z-index:3}
.tl-event.freeze{opacity:.9}
.tl-event.freeze .tl-nodeslot{height:22px}
.tl-event.freeze .tl-node{width:14px;height:14px;border-radius:3px;transform:rotate(45deg);background:var(--bg-mid);border:2px solid var(--amber)}
.tl-event.freeze:hover .tl-node{transform:rotate(45deg) scale(1.25);box-shadow:0 0 0 5px rgba(245,166,35,.14)}
.tl-event.freeze .tl-label{color:var(--text-2)}
.tl-event.freeze.tbd{opacity:.85}
.tl-tooltip{
    --tt-shift:0px;

    position:absolute;
    top:calc(100% + 12px);
    left:50%;
    transform:translateX(calc(-50% + var(--tt-shift))) translateY(-6px);

    width:min(230px, calc(100vw - 32px));

    padding:13px 15px;
    border-radius:var(--r-md);

    background:#150C2E;

    border:1px solid var(--border-soft);
    box-shadow:var(--shadow-soft);

    opacity:0;
    visibility:hidden;

    transition:opacity .25s ease, visibility .25s ease, transform .25s ease;

    z-index:60;
    pointer-events:none;

    overflow-wrap:anywhere;
}

.tl-tooltip::before{content:"";position:absolute;bottom:100%;left:calc(50% - var(--tt-shift));transform:translateX(-50%);border:7px solid transparent;border-bottom-color:#150C2E}
.tl-event:hover .tl-tooltip,.tl-event:focus-visible .tl-tooltip{opacity:1;visibility:visible;transform:translateX(calc(-50% + var(--tt-shift))) translateY(0)}
.tl-subrow .tl-tooltip{top:auto;bottom:calc(100% + 12px);transform:translateX(calc(-50% + var(--tt-shift))) translateY(6px)}
.tl-subrow .tl-tooltip::before{bottom:auto;top:100%;border-bottom-color:transparent;border-top-color:#150C2E}
.tl-subrow .tl-event:hover .tl-tooltip{transform:translateX(calc(-50% + var(--tt-shift))) translateY(0)}
.tl-tooltip h5{font-size:13px;color:#fff;margin-bottom:5px;line-height:1.3}
.tl-tooltip p{font-size:12px;color:var(--text-2);line-height:1.45}
.tl-tooltip .tt-date{font-size:11px;color:var(--green-300);font-weight:700;margin-bottom:4px}
.tl-legend{display:flex;flex-wrap:wrap;gap:18px;justify-content:center;margin-top:12px}
.tl-legend-item{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--text-2)}
.leg-dot{width:12px;height:12px;border-radius:50%;flex-shrink:0;background:var(--bg-mid)}
.leg-dot.demo{border:2px solid var(--purple-400)}
.leg-dot.workshop{border:2px solid var(--cyan)}
.leg-dot.golive{background:var(--green-500);box-shadow:0 0 10px var(--green-glow);border:none}
.leg-dot.freeze{border:2px solid var(--amber);border-radius:2px;transform:rotate(45deg);background:var(--bg-mid)}

/* ---- MY ROLE ---- */
.roles-mosaic{display:flex;flex-wrap:wrap;justify-content:center;gap:20px;margin-top:40px}
.role-tile{flex:0 1 calc((100% - 40px) / 3);min-width:260px}
.role-tile{padding:26px;border-radius:var(--r-lg);cursor:pointer;position:relative;transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease;}
.role-tile:hover{transform:translateY(-8px);box-shadow:var(--shadow-hover)}
.role-tile.emphasis{border:1px solid rgba(0,230,168,.4)}
.role-tile.active{border:1px solid var(--green-400);box-shadow:var(--shadow-green);background:rgba(0,230,168,.06);}
.role-icon{width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,rgba(124,92,252,.25),rgba(0,230,168,.18));color:var(--green-300);margin-bottom:16px;}
.role-icon svg{width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:1.8}
.role-tile h3{font-size:18px;color:var(--text-0);font-weight:800;margin-bottom:8px}
.role-tile p{font-size:13.5px;color:var(--text-2)}
.role-tile .role-arrow{position:absolute;top:26px;right:26px;color:var(--text-3);transition:transform .25s}
.role-tile.active .role-arrow{transform:rotate(90deg);color:var(--green-400)}

.usecase-panel{flex:0 0 100%;width:100%;max-height:0;overflow:hidden;opacity:0;transition:max-height .45s ease,opacity .45s ease;}
.usecase-panel.open{max-height:16000px;opacity:1;margin-top:4px}
.usecase-inner{padding:30px;border-radius:var(--r-xl);margin-top:8px}
.usecase-context-title{font-size:22px;font-weight:800;color:var(--text-0);margin-bottom:22px}
.usecase-context-title b{color:var(--green-400)}
.usecase-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:16px}
.usecase-card{flex:0 1 calc((100% - 48px) / 4);min-width:210px}
.usecase-card{padding:22px;border-radius:var(--r-lg);cursor:pointer;position:relative;
  min-height:150px;display:flex;flex-direction:column;align-items:flex-start;gap:14px;
  transition:transform .25s ease,box-shadow .25s ease;}.uc-icon{width:42px;height:42px;border-radius:11px;display:flex;align-items:center;justify-content:center;background:rgba(124,92,252,.18);color:var(--purple-300);margin-bottom:0;flex-shrink:0}
.usecase-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-hover)}

.uc-icon svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8}
.usecase-card h4{font-size:15.5px;color:var(--text-0);font-weight:700;margin:0;padding-right:28px;
  display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.usecase-card .uc-arrow{position:absolute;bottom:18px;right:18px;color:var(--text-3);transition:transform .2s}
.usecase-card:hover .uc-arrow{transform:translateX(4px);color:var(--green-400)}

/* Role-level demo banner */
.role-demo-card{display:flex;align-items:center;gap:16px;padding:16px 20px;margin-bottom:22px;border-radius:var(--r-lg);background:linear-gradient(120deg,rgba(124,92,252,.16),rgba(0,230,168,.10));border:1px solid rgba(124,92,252,.32);transition:transform .25s ease,box-shadow .25s ease;}
.role-demo-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-hover)}
.role-demo-play{width:48px;height:48px;flex-shrink:0;border-radius:50%;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--green-500),var(--purple-500));color:#fff}
.role-demo-play svg{width:22px;height:22px;fill:currentColor;stroke:none}
.role-demo-meta{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0}
.role-demo-label{font-size:15px;font-weight:800;color:var(--text-0)}
.role-demo-sub{font-size:12.5px;color:var(--text-2)}
.role-demo-cta{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:var(--green-400);white-space:nowrap}
.role-demo-cta svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2}
/* Dedicated cockpit access (Performance Manager) */
.role-cockpit-card{display:flex;align-items:center;gap:16px;padding:16px 20px;margin-top:14px;
  border-radius:var(--r-lg);background:linear-gradient(120deg,rgba(0,230,168,.14),rgba(124,92,252,.10));
  border:1px solid rgba(0,230,168,.34);transition:transform .25s ease,box-shadow .25s ease}
.role-cockpit-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-green)}
.role-cockpit-icon{width:48px;height:48px;flex-shrink:0;border-radius:13px;display:flex;align-items:center;
  justify-content:center;background:rgba(0,230,168,.18);color:var(--green-300)}
.role-cockpit-icon svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.8}
.role-cockpit-meta{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0}
.role-cockpit-label{font-size:15px;font-weight:800;color:var(--text-0)}
.role-cockpit-sub{font-size:12.5px;color:var(--text-2)}
.role-cockpit-cta{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;
  color:var(--green-400);white-space:nowrap}
.role-cockpit-cta svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2}
@media (max-width:560px){.role-cockpit-card{flex-wrap:wrap}}

/* Mandatory certification banner (red) */
.role-mandatory{display:flex;align-items:center;gap:16px;padding:16px 20px;margin-bottom:16px;border-radius:var(--r-lg);
  background:linear-gradient(120deg,rgba(255,77,109,.16),rgba(255,77,109,.06));border:1px solid rgba(255,77,109,.5);
  box-shadow:0 8px 26px rgba(255,77,109,.14);transition:transform .25s ease,box-shadow .25s ease;}
.role-mandatory:hover{transform:translateY(-3px);box-shadow:0 16px 40px rgba(255,77,109,.28)}
.role-mand-flag{display:inline-flex;align-items:center;gap:7px;flex-shrink:0;align-self:flex-start;font-size:11px;font-weight:800;
  letter-spacing:.06em;text-transform:uppercase;padding:6px 12px;border-radius:999px;background:var(--coral);color:#fff;white-space:nowrap}
.role-mand-flag svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2}
.role-mand-body{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0}
.role-mand-title{font-size:15px;font-weight:800;color:var(--text-0)}
.role-mand-text{font-size:12.5px;color:var(--text-2)}
.role-mand-list{margin:8px 0 0;padding-left:18px;display:flex;flex-direction:column;gap:5px;list-style:disc}
.role-mand-list li{font-size:12.5px;color:var(--text-2);line-height:1.5;padding-left:2px}
.role-mand-list li::marker{color:var(--coral)}
.role-mand-list b{color:var(--text-1);font-weight:700}
.role-mand-cta{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:#FF9DB0;white-space:nowrap}
.role-mand-cta svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2}

.detail-header{display:flex;align-items:center;gap:14px;margin-bottom:8px}
.detail-back{display:inline-flex;align-items:center;gap:7px;padding:9px 16px;border-radius:999px;border:1px solid var(--border-soft);color:var(--text-1);font-weight:600;font-size:13.5px;transition:all .2s;}
.detail-back:hover{background:rgba(255,255,255,.07);transform:translateX(-3px)}
.detail-role-name{font-size:15px;color:var(--text-2);font-weight:700}
.detail-role-name b{color:var(--green-400)}
.uc-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0 24px}
.uc-tab{padding:9px 16px;border-radius:999px;font-size:13.5px;font-weight:600;border:1px solid var(--border-soft);color:var(--text-2);transition:all .2s;display:inline-flex;align-items:center;gap:7px}
.uc-tab:hover{color:var(--text-0);background:rgba(255,255,255,.05)}
.uc-tab.active{background:linear-gradient(135deg,var(--green-500),var(--purple-500));color:#fff;border-color:transparent}

.detail-card{padding:30px;border-radius:var(--r-xl)}
.detail-title-row{display:flex;align-items:center;gap:14px;margin-bottom:10px;flex-wrap:wrap}
.detail-title-row .uc-icon{margin-bottom:0}
.detail-title-row h3{font-size:24px;font-weight:800;color:var(--text-0)}
.detail-desc{color:var(--text-2);font-size:14.5px;margin-bottom:28px;max-width:820px}
.detail-cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:22px}
.detail-cols.cols-2{grid-template-columns:1.15fr 1fr}
.detail-col h5{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--green-300);font-weight:800;margin-bottom:16px;}
.detail-empty{color:var(--text-3);font-size:13px;line-height:1.5}

.crit-list{display:flex;flex-direction:column;gap:14px}
.crit-item{position:relative}
.crit-row{display:flex;align-items:flex-start;gap:10px}
.crit-check{flex-shrink:0;color:var(--green-400);margin-top:2px}
.crit-check svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2}
.crit-body{flex:1;display:flex;flex-direction:column;gap:3px;min-width:0}
.crit-text{font-size:13.5px;color:var(--text-1);font-weight:600}
.crit-note{font-size:12.5px;color:var(--text-3);line-height:1.5}
.crit-mag{flex-shrink:0;width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center;border:1px solid var(--border-soft);color:var(--text-3);transition:all .2s;}
.crit-mag svg{width:15px;height:15px}
.crit-mag:hover{color:var(--green-400);border-color:var(--green-400);background:rgba(0,230,168,.08)}

.guide-col-list{display:flex;flex-direction:column;gap:10px}
.guide-col-item{display:flex;flex-direction:column;gap:9px;padding:12px 14px;border-radius:var(--r-md);background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));border:1px solid var(--border-soft);transition:transform .2s ease,box-shadow .2s ease,border-color .2s;}
.guide-col-item:hover{transform:translateY(-3px);box-shadow:var(--shadow-hover);border-color:var(--border-strong)}
.gci-title{font-size:13.5px;font-weight:700;color:var(--text-0);line-height:1.3}
.gci-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.gci-open{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;color:var(--green-400);white-space:nowrap}
.gci-open svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2}
.gbadge{font-size:10.5px;font-weight:800;letter-spacing:.03em;padding:2px 9px;border-radius:999px;white-space:nowrap}
.gbadge-essential{background:rgba(0,230,168,.14);border:1px solid rgba(0,230,168,.42);color:var(--green-300)}
.gbadge-critical{background:rgba(245,166,35,.14);border:1px solid rgba(245,166,35,.5);color:var(--amber)}
.gbadge-useful{background:rgba(255,255,255,.06);border:1px solid var(--border-soft);color:var(--text-3)}

/* Coming soon role */
.role-tile.coming-soon{opacity:.72;cursor:progress;border-style:dashed}
.role-tile.coming-soon:hover{transform:translateY(-3px);box-shadow:var(--shadow-soft)}
.role-tile.coming-soon .role-icon{filter:grayscale(.5);opacity:.85}
.role-tile.coming-soon h3{color:var(--text-1)}
.role-tile.coming-soon.active{border-color:var(--amber);box-shadow:0 16px 44px rgba(245,166,35,.20);background:rgba(245,166,35,.06)}
.role-soon-badge{position:absolute;top:22px;right:22px;display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:800;letter-spacing:.03em;padding:3px 9px;border-radius:999px;background:rgba(245,166,35,.16);border:1px solid rgba(245,166,35,.55);color:var(--amber)}
.role-soon-badge svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2}

/* "Dedicated page" badge (Performance Manager tile navigates to cockpit.html) */
.role-tile.has-page{cursor:alias}
.role-page-badge{position:absolute;top:22px;right:22px;display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:800;letter-spacing:.03em;padding:3px 9px;border-radius:999px;background:rgba(0,230,168,.14);border:1px solid rgba(0,230,168,.5);color:var(--green-300)}
.role-page-badge svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2}
.role-tile.has-page:hover{box-shadow:var(--shadow-green)}

.role-soon-panel{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;padding:20px 10px}
.role-soon-icon{width:60px;height:60px;border-radius:16px;display:flex;align-items:center;justify-content:center;background:rgba(245,166,35,.14);border:1px solid rgba(245,166,35,.4);color:var(--amber)}
.role-soon-icon svg{width:30px;height:30px;stroke:currentColor;fill:none;stroke-width:1.8}
.role-soon-tag{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--amber)}
.role-soon-title{font-size:22px;font-weight:800;color:var(--text-0)}
.role-soon-text{font-size:14px;color:var(--text-2);max-width:560px;line-height:1.6}
.role-soon-steps{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:6px}
.role-soon-step{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;color:var(--text-2);padding:8px 14px;border-radius:999px;background:rgba(255,255,255,.04);border:1px dashed var(--border-strong)}
.role-soon-step em{color:var(--amber);font-style:normal;font-weight:700}
.role-soon-step svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.8}

/* ---- SUPPORT ---- */
.support-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:40px}
.support-card{padding:28px;border-radius:var(--r-xl);display:flex;flex-direction:column;gap:14px;cursor:pointer;transition:transform .28s ease,box-shadow .28s ease;position:relative;text-align:left}
.support-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-hover)}
.support-icon{width:56px;height:56px;border-radius:15px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,rgba(124,92,252,.25),rgba(0,230,168,.18));color:var(--green-300);}
.support-icon svg{width:28px;height:28px;stroke:currentColor;fill:none;stroke-width:1.7}
.support-card h3{font-size:18px;font-weight:800;color:var(--text-0)}
.support-card p{font-size:13.5px;color:var(--text-2);flex:1}
.support-cta{display:inline-flex;align-items:center;gap:7px;color:var(--green-400);font-weight:700;font-size:13.5px}
.support-cta svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2}

/* ---- LIGHTBOX ---- */
.lightbox{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:4vh 4vw;background:rgba(8,5,20,.82);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease;}
.lightbox.open{opacity:1;visibility:visible}
.lightbox-inner{position:relative;max-width:1100px;width:100%;max-height:92vh;display:flex;flex-direction:column;border-radius:var(--r-lg);overflow:hidden;box-shadow:0 30px 90px rgba(0,0,0,.6);transform:scale(.94);transition:transform .3s cubic-bezier(.34,1.4,.64,1);}
.lightbox.open .lightbox-inner{transform:scale(1)}
.lightbox-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 20px;background:rgba(20,11,44,.9);border-bottom:1px solid var(--border-soft)}
.lightbox-title{font-size:15px;font-weight:700;color:var(--text-0)}
.lightbox-close{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--text-1);border:1px solid var(--border-soft);background:rgba(255,255,255,.04);transition:all .2s;flex-shrink:0}
.lightbox-close:hover{background:rgba(255,255,255,.12);color:#fff;transform:rotate(90deg)}
.lightbox-close svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2}
.lightbox-body{background:rgba(15,9,34,.96);overflow:auto;display:flex;align-items:center;justify-content:center;padding:10px}
.lightbox-body img{width:auto;max-width:100%;max-height:80vh;object-fit:contain;border-radius:8px}
.lightbox-body .img-placeholder{min-height:60vh;width:100%}

.img-placeholder{width:100%;min-height:200px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:30px;background:linear-gradient(135deg,rgba(124,92,252,.10),rgba(0,230,168,.06));border:1px dashed var(--border-strong);color:var(--text-3);text-align:center;}
.img-placeholder svg{width:40px;height:40px;stroke:currentColor;fill:none;stroke-width:1.5;opacity:.7}
.img-placeholder .ph-label{font-size:14px;font-weight:600;color:var(--text-2)}
.img-placeholder .ph-sub{font-size:12px;color:var(--text-3)}

.footer{position:relative;z-index:1;padding:60px 0 40px;text-align:center;border-top:1px solid var(--border-soft)}
.footer img{width:44px;height:44px;margin:0 auto 14px;border-radius:12px}
.footer p{color:var(--text-3);font-size:13px}
.footer b{color:var(--text-1)}

/* ---- RESPONSIVE ---- */
@media (max-width:1000px){
  .overview-grid{grid-template-columns:1fr}
  .news-card{position:relative;top:auto}
  .detail-cols{grid-template-columns:1fr 1fr}
  .detail-cols.cols-2{grid-template-columns:1fr}
  .support-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  .role-tile{flex:0 1 calc((100% - 20px) / 2)}
  .usecase-card{flex:0 1 calc((100% - 16px) / 2)}
  .tl-line{display:none}
  .tl-mainrow{flex-direction:column;align-items:stretch;gap:14px}
  .tl-event{flex-direction:row;align-items:center;gap:14px;max-width:none;min-width:0;padding:14px;border-radius:var(--r-md);background:rgba(255,255,255,.04);border:1px solid var(--border-soft)}
  .tl-icon{height:auto}
  .tl-nodeslot{height:auto}
  .tl-meta{margin-top:0;text-align:left}
  .tl-label{text-align:left;max-width:none}
  .tl-subrow{flex-direction:column}
  .tl-subrow::before{display:none}
  .tl-tooltip{position:relative;top:auto;left:auto;transform:none;opacity:1;visibility:visible;width:100%;margin-top:6px;pointer-events:auto}
  .tl-tooltip::before{display:none}
  .tl-event .tl-tooltip{display:none}
}
@media (max-width:768px){
  .nav-links{display:none;position:absolute;top:60px;left:0;right:0;flex-direction:column;padding:10px;border-radius:var(--r-lg);background:rgba(30,16,66,.96);backdrop-filter:blur(14px);border:1px solid var(--border-soft)}
  .nav-links.open{display:flex}
  .nav-toggle{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:10px;color:var(--text-1)}
  .navbar{width:calc(100vw - 24px);justify-content:space-between}
  .detail-cols{grid-template-columns:1fr}
  .section{padding:72px 0}
  [data-theme="light"] .nav-links{background:rgba(255,255,255,.97)}

}
@media (max-width:560px){
  .role-tile,.usecase-card{flex:0 1 100%;min-width:0}
  .support-grid{grid-template-columns:1fr}
  .guide-col-item{gap:8px}
  .role-demo-card,.role-mandatory{flex-wrap:wrap}
}

/* ============================================================================
   DAY / NIGHT — toggle button
   ========================================================================== */
.theme-toggle{width:38px;height:38px;flex-shrink:0;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--text-2);border:1px solid var(--border-soft);background:transparent;transition:color .2s ease,background .2s ease,transform .2s ease}
.theme-toggle:hover{color:var(--text-0);background:rgba(255,255,255,.06);transform:scale(1.06)}
.theme-toggle svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2}

/* ============================================================================
   LIGHT THEME
   ========================================================================== */
[data-theme="light"]{
  --purple-300:#6E4BE6; --purple-400:#7C5CFC;
  --green-300:#0E9E77;  --green-400:#0B8C69;
  --bg-deep:#F5F3FC; --bg-mid:#ECE8F8; --bg-warm:#E4DEF5;
  --surface:rgba(28,16,64,.04);
  --border-soft:rgba(28,16,64,.12); --border-strong:rgba(28,16,64,.22);
  --text-0:#160B2E; --text-1:#241A44; --text-2:#544C77; --text-3:#7E77A0;
  --shadow-soft:0 10px 34px rgba(60,40,110,.14);
  --shadow-hover:0 18px 50px rgba(124,92,252,.22);
  --shadow-green:0 14px 40px rgba(0,180,130,.20);
}
[data-theme="light"] .bg-layer{opacity:.45}
[data-theme="light"] .bg-layer::after{opacity:.03}
[data-theme="light"] .glass{background:linear-gradient(180deg,rgba(255,255,255,.82),rgba(255,255,255,.60))}
[data-theme="light"] .glass-strong{background:rgba(255,255,255,.86)}
[data-theme="light"] .grad-text{background:linear-gradient(120deg,var(--text-0) 15%,var(--green-300) 55%,var(--purple-300) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
[data-theme="light"] .nav-links a:hover,
[data-theme="light"] .uc-tab:hover,
[data-theme="light"] .detail-back:hover,
[data-theme="light"] .news-details-inner,
[data-theme="light"] .theme-toggle:hover{background:rgba(28,16,64,.05)}
[data-theme="light"] .tl-arrow{background:rgba(28,16,64,.04)}
[data-theme="light"] .tl-arrow:hover:not(:disabled){background:rgba(28,16,64,.10)}
[data-theme="light"] .guide-col-item{background:linear-gradient(180deg,rgba(28,16,64,.05),rgba(28,16,64,.02))}
[data-theme="light"] .tl-tooltip{background:#FFFFFF;border-color:var(--border-strong);box-shadow:0 12px 34px rgba(60,40,110,.20)}
[data-theme="light"] .tl-tooltip::before{border-bottom-color:#FFFFFF}
[data-theme="light"] .tl-subrow .tl-tooltip::before{border-bottom-color:transparent;border-top-color:#FFFFFF}
[data-theme="light"] .tl-tooltip h5{color:var(--text-0)}
[data-theme="light"] .tl-tooltip p{color:var(--text-2)}
[data-theme="light"] .lightbox-head{background:rgba(255,255,255,.95)}
[data-theme="light"] .lightbox-body{background:rgba(245,243,252,.98)}
[data-theme="light"] .lightbox-close{background:rgba(28,16,64,.05)}
[data-theme="light"] .lightbox-close:hover{background:rgba(28,16,64,.12);color:var(--text-0)}
[data-theme="light"] .role-soon-badge,
[data-theme="light"] .role-soon-tag,
[data-theme="light"] .role-soon-step em{color:#8A5A00}
[data-theme="light"] .role-soon-step{background:rgba(28,16,64,.05)}
[data-theme="light"] .role-mand-cta{color:#C0304A}
@media (max-width:900px){
  [data-theme="light"] .tl-event{background:rgba(28,16,64,.04);border-color:var(--border-soft)}
  [data-theme="light"] .tl-tooltip{background:#FFFFFF}
}

/* ============================================================================
   GLOBAL TEXT SAFETY — no clipping / no overflow
   ========================================================================== */
.tl-date,.gci-title,.role-tile h3,.role-tile p,.usecase-card h4,.usecase-card p,
.crit-text,.crit-note,.eco-name,.eco-scope,.news-item h4,.role-demo-label,.role-demo-sub,
.role-mand-title,.role-mand-text{
  overflow-wrap:break-word;word-break:break-word;hyphens:auto;
}
.tl-label{max-width:100%;line-height:1.22}
.gbadge{white-space:normal;height:auto;line-height:1.35}