[data-skin="frame"] { --bg:#0b0c0f; --bg-2:#101218; --panel:#16181f; --panel-2:#1c1f28; --line:#242833; --line-2:#333949; --ink:#f2f4f8; --dim:#b5bac1; --dim-2:#dbdee1; --pure:#ffffff; --anti:#0b0c0f; --fr:#5865F2; --fr-2:#8b93f8; --fr-soft:rgba(88,101,242,.13); --mut:#8b929e; --ok:#23a55a; }
[data-skin="frame"] .tex { opacity:.3; }
.eyebrow { position:relative; padding-top:16px; }
.eyebrow::before { content:""; position:absolute; left:0; top:0; width:26px; height:2px; background:var(--fr); }
.eyebrow i { background:var(--fr) !important; }
.fr-hero { position:relative; overflow:hidden; }
.fr-hero::before { content:""; position:absolute; inset:-25% -20% auto -20%; height:120%; background:radial-gradient(46% 40% at 22% 30%, var(--fr-soft), transparent 70%); pointer-events:none; }
.fr-top { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:clamp(28px,5vw,68px); align-items:center; }
.sec-sub { margin-top:20px; font-family:var(--f-sous); font-size:12.5px; letter-spacing:1.4px; line-height:1.6; color:var(--dim-2); max-width:52ch; }
.fr-name { display:block; margin:26px 0 0; line-height:0; }
.fr-name img { width:clamp(250px,42vw,540px); height:auto; display:block; }
.fr-hero .lead { max-width:530px; margin-top:26px; }
.fr-cta { display:flex; gap:12px; flex-wrap:wrap; margin-top:clamp(26px,4vh,38px); }
.btn--fr { background:var(--fr); color:#fff; box-shadow:0 16px 44px -16px var(--fr); }
.btn--fr:hover { background:var(--fr-2); }
.fr-badge { background:var(--panel); box-shadow:inset 0 0 0 1px var(--line); padding:26px 28px; }
.fr-badge img { width:52px; height:52px; border-radius:24%; display:block; box-shadow:0 14px 34px -12px var(--fr); }
.fr-pres { margin-top:22px; display:grid; gap:10px; font-family:var(--f-sous); font-size:12px; letter-spacing:1px; color:var(--dim); white-space:nowrap; }
.fr-pres b { color:var(--ink); font-family:var(--f-titre); font-weight:700; font-size:17px; letter-spacing:0; }
.fr-pres .dot { display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--mut); margin-right:8px; }
.fr-pres .on .dot { background:var(--ok); }
.fr-live .fr-pres .on .dot { animation:frLive 1.9s var(--ease) infinite; }
@keyframes frLive {0%,100% { opacity:1; } 50% { opacity:.25; }}
@media (max-width:820px) {
  .fr-top { grid-template-columns:1fr; justify-items:center; }
  .fr-badge { justify-self:center; }
  .fr-cta { justify-content:center; }
  .fr-pres { justify-items:center; }
  .fr-hero .eyebrow::before { left:50%; transform:translateX(-50%); }
}
.fr-nums { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1px; background:var(--line); box-shadow:0 0 0 1px var(--line); margin-top:clamp(46px,7vh,80px); }
.fr-nums > div { background:var(--bg); padding:clamp(24px,3.2vw,34px) 18px; }
.fr-nums b { display:block; font-family:var(--f-titre); font-weight:700; font-size:clamp(26px,3.6vw,40px); letter-spacing:-1.4px; line-height:1; }
.fr-nums .hi { color:var(--fr-2); }
.fr-nums span { display:block; margin-top:11px; font-family:var(--f-sous); font-size:10.5px; letter-spacing:2px; text-transform:uppercase; color:var(--mut); }
.fr-pillars { display:grid; grid-template-columns:repeat(auto-fit,minmax(268px,1fr)); gap:14px; }
.fr-pillar { position:relative; overflow:hidden; background:var(--panel); box-shadow:inset 0 0 0 1px var(--line); padding:clamp(28px,3.2vw,38px); transition:box-shadow .45s var(--ease), transform .45s var(--ease); }
.fr-pillar:hover { transform:translateY(-4px); box-shadow:inset 0 0 0 1px var(--line-2); }
.fr-pillar .ghost { position:absolute; right:-8px; bottom:-30px; font-weight:700; font-size:132px; line-height:1; letter-spacing:-6px; color:transparent; -webkit-text-stroke:1px var(--line-2); pointer-events:none; transition:-webkit-text-stroke-color .45s var(--ease); }
.fr-pillar:hover .ghost { -webkit-text-stroke-color:var(--fr); }
.fr-pillar::after { content:""; position:absolute; inset:auto 0 0 0; height:2px; background:var(--fr); transform:scaleX(0); transform-origin:left; transition:transform .55s var(--ease); }
.fr-pillar:hover::after { transform:scaleX(1); }
.fr-pillar h3 { position:relative; font-size:clamp(19px,2.1vw,23px); letter-spacing:-.4px; margin-bottom:12px; }
.fr-pillar p { position:relative; color:var(--dim); font-size:15px; line-height:1.68; }
.fr-lead-shot { margin-bottom:14px; }
.fr-shots { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr)); gap:14px; }
.fr-shot { position:relative; background:var(--panel); overflow:hidden; box-shadow:inset 0 0 0 1px var(--line); transition:box-shadow .45s var(--ease), transform .45s var(--ease); }
.fr-shot:hover { box-shadow:inset 0 0 0 1px var(--fr); transform:translateY(-4px); }
.fr-shot .pic { position:relative; aspect-ratio:16/10; background:var(--bg-2); overflow:hidden; }
.fr-lead-shot .pic { aspect-ratio:21/9; }
.fr-shot img { width:100%; height:100%; object-fit:cover; object-position:top center; display:block; transition:transform .8s var(--ease); }
.fr-shot:hover img { transform:scale(1.025); }
.fr-shot figcaption { padding:16px 19px; font-size:14px; line-height:1.55; color:var(--dim); }
.fr-shot.empty img { display:none; }
.fr-shot.empty .pic { background:repeating-linear-gradient(45deg, var(--bg-2) 0 11px, var(--panel) 11px 22px); }
.fr-map { display:grid; grid-template-columns:repeat(auto-fit,minmax(186px,1fr)); gap:28px 32px; margin-top:clamp(40px,5vh,60px); padding-top:clamp(32px,4vh,46px); box-shadow:inset 0 1px 0 var(--line); }
.fr-cat .cat { display:flex; align-items:center; gap:9px; font-family:var(--f-sous); font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--ink); }
.fr-cat .cat::before { content:""; width:7px; height:7px; flex:none; background:var(--fr); }
.fr-cat ul { list-style:none; margin-top:15px; display:grid; gap:8px; }
.fr-cat li { font-family:var(--f-sous); font-size:12.5px; color:var(--dim); transition:color .25s var(--ease); }
.fr-cat li::before { content:"# "; color:var(--fr-2); }
.fr-cat:hover li { color:var(--ink); }
.fr-tl .yr { font-family:var(--f-sous); font-size:11.5px; letter-spacing:2px; color:var(--fr-2); }
.fr-tl .tl b { display:block; font-size:18px; letter-spacing:-.3px; margin:6px 0 8px; }
.fr-tl .tl p { color:var(--dim); font-size:15px; line-height:1.68; max-width:660px; }
.fr-tl .tl::before { background:var(--fr) !important; }
.fr-join { position:relative; overflow:hidden; text-align:center; background:linear-gradient(158deg, #4550dd, var(--fr) 52%, #6f79f6); }
.fr-join::before { content:""; position:absolute; inset:auto 0 -8% 0; height:64%; background:url("/img/frame/frame-lockup-white.webp") center bottom / contain no-repeat; opacity:.08; pointer-events:none; }
.fr-join .wrap { position:relative; z-index:2; }
.fr-join .display { color:#fff; }
.fr-join .lead { max-width:500px; margin:20px auto 0; color:#e9ebff; }
.fr-join .btn--solid { background:#fff; color:var(--fr); }
.fr-join .btn--solid:hover { background:#e9ebff; }
.fr-join .url { display:block; margin-top:20px; font-family:var(--f-sous); font-size:12px; letter-spacing:1.5px; color:#c8ceff; }
.fr-join .eyebrow { justify-content:center; color:#fff; }
.fr-join .eyebrow::before { left:50%; transform:translateX(-50%); background:#fff; }
.fr-join .eyebrow i { background:#fff !important; }
.fr-shot:not(.empty) .pic { cursor:zoom-in; }
.fr-lb[hidden] { display:none; }
.fr-lb { position:fixed; inset:0; z-index:10001; display:grid; place-items:center; padding:clamp(16px,4vw,54px); background:rgba(6,7,10,.94); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); opacity:0; transition:opacity .32s var(--ease); }
.fr-lb.on { opacity:1; }
.fr-lb figure { max-width:1500px; width:100%; }
.fr-lb img { display:block; width:100%; height:auto; max-height:78svh; object-fit:contain; box-shadow:0 40px 120px -40px #000, inset 0 0 0 1px var(--line); transform:scale(.985); transition:transform .32s var(--ease); }
.fr-lb.on img { transform:none; }
.fr-lb figcaption { margin-top:18px; text-align:center; font-size:14px; color:var(--dim); }
.fr-lb-x { position:absolute; top:clamp(14px,2.4vw,26px); right:clamp(14px,2.4vw,26px); width:44px; height:44px; display:grid; place-items:center; font-size:17px; color:var(--dim); box-shadow:inset 0 0 0 1px var(--line); background:var(--panel); transition:color .25s, box-shadow .25s; }
.fr-lb-x:hover { color:var(--ink); box-shadow:inset 0 0 0 1px var(--fr); }
html.fr-zoom,
html.fr-zoom body { overflow:hidden; }
html.fr-zoom #cursor { z-index:10002; }
html.fr-zoom #focus { display:none; }
@media (prefers-reduced-motion:reduce) {
  .fr-lb,
  .fr-lb img { transition:none; }
}
@media (max-width:560px) {
  .fr-pillar .ghost { font-size:104px; }
  .fr-lead-shot .pic { aspect-ratio:16/10; }
}
@media (prefers-reduced-motion:reduce) {
  .fr-live .fr-pres .on .dot { animation:none; }
  .fr-shot:hover img { transform:none; }
}