/* ============================================================
   academy-hub.css — shared layout for brand academy hubs
   (Schneider / Rockwell / CODESYS / …). Brand colour comes from
   CSS variables the hub page sets in :root before loading this.
   Required vars: --cream --cream-2 --ink --ink-soft --paper
   --primary --primary-deep --accent(dark) --line  (+ optional
   --blue --yellow --mint --grape --signal for card tints)
   ============================================================ */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{ font-family:"DM Sans",system-ui,sans-serif; background:var(--cream); color:var(--ink); -webkit-font-smoothing:antialiased; overflow-x:hidden }
body::before{ content:""; position:fixed; inset:0; background-image:radial-gradient(rgba(0,0,0,0.07) 1.2px,transparent 1.2px); background-size:22px 22px; pointer-events:none; z-index:0 }
.page{ position:relative; z-index:1; max-width:1120px; margin:0 auto; padding:0 28px 90px }
h1,h2,h3,h4{ font-family:"Bricolage Grotesque",system-ui,sans-serif; font-weight:800; letter-spacing:-0.02em; margin:0; line-height:1.08 }
code,.mono{ font-family:"JetBrains Mono",ui-monospace,monospace }
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:.25}}

/* brand switcher */
.brandbar{ display:flex; gap:8px; padding-top:22px; flex-wrap:wrap }
.brandtab{ display:inline-flex; align-items:center; gap:9px; text-decoration:none; font-family:"JetBrains Mono",monospace; font-weight:700; font-size:13px; color:var(--ink); border:3px solid var(--line); border-radius:13px; padding:9px 15px; background:var(--paper); box-shadow:3px 3px 0 var(--line); transition:transform .08s ease, box-shadow .08s ease }
.brandtab:hover{ transform:translate(-1px,-1px); box-shadow:4px 4px 0 var(--line) }
.brandtab .bdot{ width:11px; height:11px; border-radius:50%; border:2px solid var(--line) }
.brandtab .bdot.beckhoff{ background:#FF5A7A } .brandtab .bdot.omron{ background:#0F74D9 } .brandtab .bdot.siemens{ background:#009999 }
.brandtab .bdot.schneider{ background:#3DCD58 } .brandtab .bdot.rockwell{ background:#CC0000 } .brandtab .bdot.codesys{ background:#3A6EA5 }
.brandtab[aria-current="page"]{ background:var(--primary); color:#fff }
.brandtab[aria-current="page"] .bdot{ background:#fff; border-color:#fff }

.hubctl{ display:flex; justify-content:flex-end; gap:10px; padding-top:14px }
.ctlbtn{ appearance:none; cursor:pointer; font-family:"JetBrains Mono",monospace; font-weight:700; font-size:13px; border:3px solid var(--line); border-radius:12px; padding:9px 14px; background:var(--paper); color:var(--ink); box-shadow:3px 3px 0 var(--line); display:inline-flex; align-items:center; gap:8px; transition:transform .08s ease, box-shadow .08s ease }
.ctlbtn:hover{ transform:translate(-1px,-1px); box-shadow:4px 4px 0 var(--line) }
.ctlbtn:active{ transform:translate(2px,2px); box-shadow:1px 1px 0 var(--line) }

/* hero */
.hero{ display:grid; grid-template-columns:1fr auto; gap:34px; align-items:center; padding:30px 0 }
.eyebrow{ font-family:"JetBrains Mono",monospace; font-weight:700; font-size:13px; letter-spacing:.16em; text-transform:uppercase; color:var(--primary); display:inline-flex; align-items:center; gap:9px }
.eyebrow .dot{ width:9px; height:9px; border-radius:50%; background:var(--primary); border:2px solid var(--line) }
.hero h1{ font-size:clamp(38px,6.2vw,68px); margin:14px 0 0 }
.hero h1 .u{ background-repeat:repeat-x; background-position:0 100%; background-size:120px 14px; padding-bottom:.14em }
.hero p.lede{ font-size:19px; line-height:1.5; color:var(--ink-soft); max-width:54ch; margin:18px 0 0; font-weight:500 }
.heromark{ width:150px; height:150px; border-radius:28px; background:var(--primary); border:4px solid var(--line); position:relative; box-shadow:8px 8px 0 var(--line); animation:bob 3s ease-in-out infinite; display:flex; align-items:center; justify-content:center; font-size:74px; flex:0 0 auto }
@media (max-width:880px){ .hero{ grid-template-columns:1fr; gap:18px } .heromark{ width:104px; height:104px; font-size:50px } }

/* progress banner */
.banner{ display:flex; align-items:center; gap:22px; flex-wrap:wrap; background:var(--paper); border:3px solid var(--line); border-radius:20px; box-shadow:7px 7px 0 var(--line); padding:20px 24px; margin-top:18px }
.banner .ring{ position:relative; width:74px; height:74px; flex:0 0 auto }
.banner .ring svg{ transform:rotate(-90deg) }
.banner .ring .pct{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:"Bricolage Grotesque",sans-serif; font-weight:800; font-size:18px }
.banner .btxt{ flex:1; min-width:220px }
.banner .btxt .t{ font-family:"Bricolage Grotesque",sans-serif; font-weight:800; font-size:21px }
.banner .btxt .s{ font-size:14.5px; color:var(--ink-soft); font-weight:500; margin-top:3px }
.btn{ appearance:none; cursor:pointer; font-family:inherit; text-decoration:none; border:3px solid var(--line); border-radius:14px; padding:13px 20px; font-weight:700; font-size:15px; background:var(--yellow,#F2B705); color:var(--ink); box-shadow:5px 5px 0 var(--line); display:inline-flex; align-items:center; gap:9px; transition:transform .08s ease, box-shadow .08s ease; white-space:nowrap }
.btn:hover{ transform:translate(-1px,-1px); box-shadow:6px 6px 0 var(--line) }
.btn:active{ transform:translate(3px,3px); box-shadow:2px 2px 0 var(--line) }
.btn.primary{ background:var(--primary); color:#fff }

/* learning path */
.lpath{ background:var(--paper); border:3px solid var(--line); border-radius:20px; box-shadow:7px 7px 0 var(--line); padding:20px 22px; margin-top:18px }
.lpath .lp-head{ display:flex; align-items:center; gap:10px; margin-bottom:14px; flex-wrap:wrap }
.lpath .lp-head h3{ font-size:20px }
.lpath .lp-head .lp-sub{ font-size:13.5px; color:var(--ink-soft); font-weight:500 }
.lp-flow{ display:flex; align-items:stretch; gap:8px; flex-wrap:wrap }
.lp-step{ flex:1 1 0; min-width:150px; text-decoration:none; color:inherit; border:2.5px solid var(--line); border-radius:14px; padding:12px 13px; background:var(--cream); display:flex; flex-direction:column; gap:5px; transition:transform .1s ease, box-shadow .1s ease }
.lp-step:hover{ transform:translateY(-2px); box-shadow:4px 4px 0 var(--line) }
.lp-step .lp-n{ font-family:"JetBrains Mono",monospace; font-weight:700; font-size:11px; color:var(--primary); letter-spacing:.08em }
.lp-step .lp-t{ font-family:"Bricolage Grotesque",sans-serif; font-weight:800; font-size:15px; line-height:1.15 }
.lp-step .lp-d{ font-size:12px; color:var(--ink-soft); font-weight:500; line-height:1.35 }
.lp-arrow{ align-self:center; color:var(--ink-soft); font-weight:800; font-size:16px; flex:0 0 auto }
@media (max-width:780px){ .lp-arrow{ display:none } .lp-step{ flex:1 1 44% } }

/* section label */
.seclabel{ display:flex; align-items:baseline; gap:14px; margin:46px 2px 20px }
.seclabel .n{ font-family:"JetBrains Mono",monospace; font-weight:700; font-size:13px; color:var(--primary); letter-spacing:.12em; text-transform:uppercase }
.seclabel h2{ font-size:27px }
.seclabel .rule{ flex:1; height:3px; background:rgba(0,0,0,.14); border-radius:2px }

/* coming soon */
.soon{ display:grid; grid-template-columns:auto 1fr; gap:24px; align-items:center; border:3px dashed color-mix(in srgb, var(--line) 38%, transparent); border-radius:22px; padding:22px 26px; background:repeating-linear-gradient(45deg, color-mix(in srgb, var(--line) 4%, transparent) 0 14px, transparent 14px 28px) }
.soon .icon{ width:72px; height:72px; border-radius:18px; border:3px dashed color-mix(in srgb, var(--line) 38%, transparent); background:rgba(255,255,255,.5); display:flex; align-items:center; justify-content:center; font-size:34px; filter:grayscale(.2) }
.soon h3{ font-size:21px; color:var(--ink-soft) }
.soon p{ margin:6px 0 0; font-size:14.5px; color:var(--ink-soft); font-weight:500 }
.soon .wip{ font-family:"JetBrains Mono",monospace; font-weight:700; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--primary) }

/* module cards */
.tracks{ display:grid; gap:22px }
.mod{ display:grid; grid-template-columns:auto 1fr auto; gap:24px; align-items:center; background:var(--paper); border:3px solid var(--line); border-radius:22px; box-shadow:8px 8px 0 var(--line); padding:24px 26px; position:relative; text-decoration:none; color:inherit; transition:transform .1s ease, box-shadow .1s ease }
a.mod:hover{ transform:translate(-2px,-2px); box-shadow:11px 11px 0 var(--line) }
a.mod:active{ transform:translate(2px,2px); box-shadow:4px 4px 0 var(--line) }
.mod.c1{ background:color-mix(in srgb, var(--primary) 14%, var(--paper)) }
.mod.c2{ background:color-mix(in srgb, var(--blue,#2C6FE0) 12%, var(--paper)) }
.mod.c3{ background:color-mix(in srgb, var(--yellow,#F2B705) 16%, var(--paper)) }
.mod.c4{ background:color-mix(in srgb, var(--mint,#12B58D) 14%, var(--paper)) }
.mod.c5{ background:color-mix(in srgb, var(--grape,#7A5AF0) 13%, var(--paper)) }
.mod .icon{ width:84px; height:84px; flex:0 0 auto; border-radius:20px; border:3px solid var(--line); background:#fff; display:flex; align-items:center; justify-content:center; font-size:42px; box-shadow:4px 4px 0 var(--line); position:relative }
.mod .tracknum{ position:absolute; top:-12px; left:-12px; width:34px; height:34px; border-radius:10px; border:3px solid var(--line); background:var(--yellow,#F2B705); display:flex; align-items:center; justify-content:center; font-family:"JetBrains Mono",monospace; font-weight:700; font-size:14px; box-shadow:2px 2px 0 var(--line) }
.mod .body{ min-width:0 }
.mod .titlerow{ display:flex; align-items:center; gap:12px; flex-wrap:wrap }
.mod .body h3{ font-size:24px }
.mod .body .codename{ font-family:"JetBrains Mono",monospace; font-weight:700; font-size:12.5px; color:var(--ink-soft) }
.mod .body p{ margin:8px 0 0; font-size:15px; line-height:1.45; color:var(--ink-soft); font-weight:500; max-width:62ch }
.meta{ display:flex; gap:9px; flex-wrap:wrap; margin-top:13px; align-items:center }
.tag{ display:inline-flex; align-items:center; gap:6px; padding:4px 11px; border-radius:999px; border:2px solid var(--line); background:#fff; font-family:"JetBrains Mono",monospace; font-weight:700; font-size:11.5px }
.tag .swatch{ width:9px; height:9px; border-radius:50%; border:1px solid var(--line) }
.mod .cta{ flex:0 0 auto; display:flex; flex-direction:column; align-items:flex-end; gap:10px }
.statepill{ font-family:"JetBrains Mono",monospace; font-weight:700; font-size:11px; letter-spacing:.08em; text-transform:uppercase; padding:5px 11px; border-radius:999px; border:2px solid var(--line); background:#fff }
.statepill.live{ background:var(--mint,#12B58D) }
.statepill.planned{ background:#fff; color:var(--ink-soft); border-style:dashed }
.go{ width:52px; height:52px; border-radius:50%; border:3px solid var(--line); background:var(--primary); color:#fff; display:flex; align-items:center; justify-content:center; font-size:22px; box-shadow:4px 4px 0 var(--line); transition:transform .1s ease }
a.mod:hover .go{ transform:translateX(3px) }
.mod.locked{ opacity:.9 } .mod.locked .icon{ filter:grayscale(.3) } .mod.locked .go{ background:#fff; color:var(--ink-soft) } .mod.locked .tracknum{ background:#fff; color:var(--ink-soft); border-style:dashed }

footer{ margin-top:54px; padding-top:22px; border-top:2px dashed rgba(0,0,0,.18); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; align-items:center; color:rgba(0,0,0,.5); font-size:13px }

@media (max-width:880px){ .mod{ grid-template-columns:auto 1fr } .mod .cta{ grid-column:1 / -1; flex-direction:row; justify-content:space-between; align-items:center; margin-top:4px } }
@media (max-width:520px){ .mod{ grid-template-columns:1fr; text-align:left } .mod .icon{ width:72px; height:72px; font-size:36px } }

/* dark */
html.dark body{ background:var(--d-bg,#0e1414); color:var(--d-ink,#E7F3F2) }
html.dark body::before{ background-image:radial-gradient(rgba(255,255,255,0.05) 1.2px,transparent 1.2px) }
html.dark{ --cream:var(--d-bg,#0e1414); --paper:var(--d-paper,#18211f); --ink-soft:var(--d-soft,#9fb9b3) }
html.dark h1,html.dark h2,html.dark h3,html.dark h4{ color:#fff }
html.dark .seclabel .n,html.dark .eyebrow,html.dark .lp-step .lp-n,html.dark .mod .body .codename{ color:var(--accent) }
html.dark .brandtab,html.dark .ctlbtn,html.dark .banner,html.dark .lpath,html.dark .mod{ border-color:var(--d-line,#0a0f0f); box-shadow:6px 6px 0 #05080a }
html.dark .seclabel .rule{ background:rgba(255,255,255,.12) }
html.dark .soon, html.dark .soon .icon{ border-color:rgba(255,255,255,.16) }
html.dark .soon .icon{ background:rgba(255,255,255,.05) }
html.dark .brandtab,html.dark .ctlbtn{ color:var(--d-ink,#E7F3F2) }
html.dark .mod.c1,html.dark .mod.c2,html.dark .mod.c3,html.dark .mod.c4,html.dark .mod.c5{ background:var(--d-paper,#18211f) }
html.dark .mod h3{ color:#fff }
html.dark .mod .icon{ background:var(--d-bg,#0e1414); border-color:var(--d-line,#0a0f0f) }
html.dark .lp-step{ background:var(--d-bg,#0e1414) }
html.dark .tag,html.dark .statepill{ background:#22302d; color:var(--d-ink,#E7F3F2); border-color:var(--d-line,#0a0f0f) }
html.dark .statepill.live{ background:color-mix(in srgb, var(--primary) 55%, #0a0f0f); color:#fff }
html.dark .statepill.planned{ background:#22302d; color:var(--d-soft,#9fb9b3) }
html.dark footer{ border-color:rgba(255,255,255,.14); color:rgba(231,243,242,.55) }