@font-face{font-family:'Proxima Nova';src:url('assets/fonts/proxima-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Proxima Nova';src:url('assets/fonts/proxima-700.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Proxima Nova';src:url('assets/fonts/proxima-800.woff2') format('woff2');font-weight:800;font-display:swap}
/* ---- tokens: Blyott | Simac PHI DATA app shell (HUISSTIJL-VOOR-CLAUDE §3/§7) ---- */
:root{--navy:#20213a;--navy-deep:#181927;--red:#cc142f;--red-bright:#ff6b7f;--blue-soft:#7ec4ff;
  --sig:linear-gradient(100deg,#021C8A 0%,#3A2A6B 52%,#C91530 100%);
  --wash:linear-gradient(112deg,rgba(2,28,138,.5),rgba(24,25,39,.42) 40%,rgba(58,42,107,.34) 66%,rgba(201,21,48,.34));
  --r:14px;--r-sm:9px;
  --text:#1b2230;--muted:#6b7480;--light:#9aa3ae;--surface:#f5f6f8;--surface2:#eceef2;--line:#ededed;--line2:#e3e7ee;--panel:#fff;--bg:#fff;--blue:#0096ff;--blue-ink:#0072cc;
  --shadow:0 10px 30px rgba(27,34,48,.08);--tint:#f4f8fd;color-scheme:light}
html{overflow-x:hidden;scroll-behavior:smooth}
*{box-sizing:border-box;margin:0;padding:0;min-width:0}
body{font-family:'Proxima Nova',Poppins,system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--text);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden;min-height:100vh;display:flex;flex-direction:column}
a{color:inherit;text-decoration:none}button{font-family:inherit;cursor:pointer}
svg.i{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.wrap{max-width:1180px;width:100%;margin:0 auto;padding:0 24px}

/* ---- header: dark brand band ---- */
.top{position:relative;background:var(--navy-deep);color:#fff;overflow:hidden;padding:0 24px;min-height:64px;display:flex;align-items:center;gap:22px;z-index:20}
.top::before{content:"";position:absolute;inset:0;background:var(--wash);opacity:.55;pointer-events:none}
.top::after{content:"";position:absolute;left:-90px;top:-190px;width:340px;height:340px;border-radius:50%;filter:blur(38px);opacity:.5;background:radial-gradient(circle,#0096ff,transparent 68%);pointer-events:none}
.top>*{position:relative}
.brand{display:flex;align-items:flex-end;gap:14px;min-width:0}
.lg-bl{height:19px;width:auto;display:block;margin-bottom:1px}
.bar{width:1px;height:26px;background:rgba(255,255,255,.32);align-self:center}
.lg-si{height:34px;width:auto;display:block;opacity:.95}
.top nav{display:flex;gap:2px;margin-left:10px}
.top nav a{color:rgba(255,255,255,.66);font-weight:700;font-size:14px;padding:8px 12px;border-radius:7px}
.top nav a:hover{color:#fff}.top nav a.on{color:#fff}
.top .sp{flex:1}
.seg{display:flex;background:rgba(255,255,255,.1);border-radius:var(--r-sm);padding:3px;gap:2px;flex:none}
.seg button{border:0;background:transparent;color:rgba(255,255,255,.66);font-weight:800;font-size:13px;height:30px;padding:0 12px;border-radius:6px;display:grid;place-items:center}
.seg button[aria-pressed=true]{background:#fff;color:var(--navy-deep)}
.seg button:focus-visible{outline:2px solid var(--blue-soft);outline-offset:2px}
/* Invisible 44px touch targets around the small header and search controls.
   The language pair splits its 2px gap (1px each) and reaches into the 3px
   padding of .seg on the outer side, so each half gets a 44px-wide target. */
.seg button,.search .x{position:relative}
.seg button::before{content:"";position:absolute;inset:-7px -1px}
.seg button:first-child::before{left:-3px}.seg button:last-child::before{right:-3px}
.search .x::before{content:"";position:absolute;inset:-8px}
.sig{height:4px;background:var(--sig);flex:none}

/* ---- hero: continues the dark band, real Blyott banner under the brand wash ---- */
.hero{position:relative;background:var(--navy-deep);color:#fff}
.hbg{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.hero .ph{position:absolute;inset:0;background:url('assets/site/hero-banner.jpg') center/cover no-repeat;opacity:.55}
.hbg::before{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(24,25,39,.96) 0%,rgba(24,25,39,.86) 45%,rgba(24,25,39,.45) 100%),var(--wash);pointer-events:none}
.hbg::after{content:"";position:absolute;right:-70px;bottom:-230px;width:380px;height:380px;border-radius:50%;filter:blur(40px);opacity:.42;background:radial-gradient(circle,#c91530,transparent 68%);pointer-events:none}
.hero .in{position:relative;z-index:1;padding:64px 24px 60px}
.eyebrow{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--blue-soft);font-weight:800}
.hero h1{font-size:46px;font-weight:800;letter-spacing:-.02em;line-height:1.06;margin:10px 0 12px;max-width:860px}
.hero h1 em{font-style:normal;color:var(--blue-soft)}
.hero p{color:rgba(255,255,255,.72);font-size:16px;max-width:520px}
.searchwrap{position:relative;max-width:620px;margin-top:26px}
.search{display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.22);border-radius:var(--r);padding:0 16px;height:54px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.search:focus-within{border-color:var(--blue-soft);box-shadow:0 0 0 3px rgba(0,150,255,.25);background:rgba(255,255,255,.12)}
.search svg{color:var(--blue-soft)}
.search input{flex:1;border:0;outline:0;background:none;color:#fff;font:inherit;font-size:16px}
.search input::placeholder{color:rgba(255,255,255,.5)}
.search .x{display:none;border:0;background:none;color:rgba(255,255,255,.7);padding:6px}
.search.has .x{display:grid}
.count{margin-top:16px;font-size:13.5px;color:rgba(255,255,255,.62)}
.count b{color:#fff;font-weight:800}

/* ---- library ---- */
main{flex:1 0 auto}
.secbar{position:sticky;top:0;z-index:15;background:var(--bg);border-bottom:1px solid var(--line)}
.tabs{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.tabs::-webkit-scrollbar{display:none}
.tabs button{flex:none;background:none;border:0;border-bottom:3px solid transparent;color:var(--muted);font-weight:800;font-size:14px;padding:16px 12px 13px;margin-bottom:-1px;white-space:nowrap;transition:color .12s}
.tabs button:hover{color:var(--text)}.tabs button[aria-pressed=true]{color:var(--text);border-bottom-color:var(--blue)}
.tabs button .n{color:var(--light);font-weight:700;margin-left:6px;font-variant-numeric:tabular-nums}
.tabs button[aria-pressed=true] .n{color:var(--blue-ink)}

/* featured: real covers and video stills, four per row */
.featband{background:var(--bg);position:relative}
.featured{padding:40px 24px 44px;position:relative}
.featured h2{font-size:24px;font-weight:800;letter-spacing:-.02em;margin-bottom:18px;color:var(--text)}
.featured h2::before{content:"";display:block;width:44px;height:3px;border-radius:2px;background:var(--sig);margin-bottom:12px}
.fgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.fcard{display:flex;flex-direction:column;border-radius:var(--r);overflow:hidden;background:var(--panel);color:var(--text);border:1px solid var(--line);transition:transform .15s,box-shadow .15s}
.fcard:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.fcard .im{position:relative;aspect-ratio:16/9;background:var(--surface2) center/cover no-repeat}
.fcard .im.cover{background-size:cover;background-position:top center}
.fcard .play{position:absolute;left:14px;bottom:14px;width:40px;height:40px;border-radius:50%;background:#fff;color:var(--navy-deep);display:grid;place-items:center;box-shadow:0 4px 14px rgba(0,0,0,.25)}
.fcard .play svg{width:14px;height:14px;fill:currentColor;stroke:none;margin-left:2px}
.fcard .b{padding:14px 16px 16px}
.fcard .k{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--blue-ink)}
.fcard h3{font-size:15.5px;font-weight:800;line-height:1.3;margin:4px 0 8px}
.fcard .act{font-size:13.5px;font-weight:700;color:var(--blue-ink);display:inline-flex;align-items:center;gap:6px}

.lib{padding:0 0 0}
.section{padding:40px 0 36px;scroll-margin-top:60px}
.section.band{background:var(--tint)}
.section.band .drow:hover{background:var(--panel)}
.sh{display:flex;align-items:baseline;gap:12px;padding-bottom:12px;position:relative}
.sh::before{content:"";position:absolute;left:0;bottom:-1px;width:64px;height:2px;background:var(--sig);z-index:1}
.sh::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--line2)}
.sh h2{font-size:24px;font-weight:800;letter-spacing:-.02em}
.sh .n{font-size:14px;color:var(--blue-ink);font-weight:800;font-variant-numeric:tabular-nums}
.drow{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1.2fr) 64px auto;align-items:center;gap:18px;padding:15px 6px;border-bottom:1px solid var(--line);border-radius:6px;transition:background .12s}
.drow:hover{background:var(--surface)}
.drow .t{font-weight:800;font-size:15.5px;color:var(--text);line-height:1.3}
.drow .t .new{display:inline-block;vertical-align:2px;margin-left:8px;font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--red);background:color-mix(in srgb,var(--red) 12%,var(--panel));border-radius:999px;padding:2px 8px}
.drow .m{color:var(--muted);font-size:14.5px;line-height:1.35}
.drow .ty{font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--blue-ink)}
.drow .a{color:var(--blue-ink);font-weight:700;font-size:14px;white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
.empty{display:none;padding:56px 24px;text-align:center;color:var(--muted)}
.empty b{display:block;color:var(--text);font-size:17px;font-weight:800;margin-bottom:6px}
.empty button{margin-top:14px;background:var(--blue);color:#fff;border:0;border-radius:var(--r-sm);padding:11px 18px;font-weight:800;font-size:14px}

/* ---- footer: dark brand band ---- */
.foot{background:var(--navy-deep);color:rgba(255,255,255,.62);padding:22px 24px;font-size:10px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;text-align:center;line-height:1.8}
.foot a{color:rgba(255,255,255,.85)}

@media(max-width:1000px){.fgrid{grid-template-columns:repeat(2,1fr)}.hero h1{font-size:38px}}
@media(max-width:680px){
  .top{padding:0 16px;gap:12px;min-height:58px}.top nav{display:none}.lg-bl{height:16px}.lg-si{height:29px}.bar{height:22px}
  .wrap{padding:0 16px}.hero .in{padding:40px 16px 36px}.hero h1{font-size:32px}.hero p{font-size:15px}.search{height:50px}
  .fgrid{grid-template-columns:1fr 1fr;gap:12px}.fcard .b{padding:12px}.fcard h3{font-size:14px}.fcard .play{width:34px;height:34px;left:10px;bottom:10px}
  .featured{padding:30px 16px 34px}.featured h2{font-size:20px}.section{padding:28px 0 24px}.sh h2{font-size:21px}
  .drow{grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;padding:12px 2px}.drow .m{grid-column:1;grid-row:2;font-size:13.5px}.drow .ty{display:none}.drow .a{grid-column:2;grid-row:1/3}.drow .a span{display:none}
  .drow .t{font-size:15px}
  .foot{letter-spacing:.14em;padding:18px 16px}
}