/* GENERATED by scripts/port_exxipo.py from design/exxipo.html -- do not edit. */
:root{
  color-scheme:dark;
  --ink:#000000; --panel:#000000; --panel2:#0d0d0d; --panel3:#161616;
  --line:#ffffff; --line2:#ffffff;
  --orange:#ff6a1f; --gold:#ffb020; --red:#d13a22; --green:#3ec97a; --blue:#4a9fe0;
  --text:#ffffff; --text2:#ffffff; --muted:#f2f2f2;
  --r:14px; --r-sm:9px;
  --shadow:0 20px 50px rgba(0,0,0,.6);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;background:#000}
body{background:#000;color:var(--text);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
section,footer,.wrap{background:#000}
h1,h2,h3,h4{font-family:'Big Shoulders Display',Impact,'Arial Narrow',sans-serif;font-weight:800;line-height:1;letter-spacing:.01em;color:#fff}
.mono{font-family:'JetBrains Mono',ui-monospace,monospace}
a{color:var(--gold);text-decoration:none}
button{font-family:inherit;font-size:inherit;cursor:pointer;border:none;background:none;color:inherit}
img{max-width:100%;display:block}
input,textarea,select{font-family:inherit;font-size:14px;width:100%;padding:10px 12px;background:var(--panel3);border:1px solid var(--line);color:var(--text);border-radius:var(--r-sm);outline:none}
input:focus,textarea:focus,select:focus{border-color:var(--orange);box-shadow:0 0 0 3px rgba(255,106,31,.14)}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:#555;border-radius:9px}

.wrap{max-width:1160px;margin:0 auto;padding:0 20px}
.btn{padding:11px 22px;border-radius:var(--r-sm);font-weight:600;font-size:14px;background:var(--panel3);border:1px solid var(--line2);display:inline-flex;align-items:center;justify-content:center;gap:8px;color:var(--text)}
.btn:hover{border-color:var(--orange)}
.btn.pri{background:linear-gradient(135deg,var(--orange),var(--red));border-color:transparent;color:#fff}
.btn.pri:hover{filter:brightness(1.1)}
.btn.lg{padding:15px 32px;font-size:16px}
.btn.sm{padding:7px 13px;font-size:12.5px}

/* ============ FULL-BLEED HERO (TikTok style) ============ */
.hero{
  position:relative;width:100%;height:100vh;height:100dvh;min-height:560px;
  background:#000;overflow:hidden;display:flex;align-items:center;justify-content:center;
}
.vframe{
  position:relative;height:100%;width:min(100vw,calc(100dvh * 9 / 16));
  background:#000;overflow:hidden;
}
.vframe video,.vframe .poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vframe .poster{display:grid;place-items:center;font-size:72px;background:radial-gradient(700px 500px at 50% 40%,#1f150f,#000 70%)}

.hud{
  position:absolute;top:0;left:0;right:0;z-index:5;
  padding:max(14px,env(safe-area-inset-top)) 16px 0;
  display:flex;align-items:flex-start;justify-content:space-between;gap:10px;
  background:linear-gradient(rgba(0,0,0,.72),transparent);
  padding-bottom:34px;pointer-events:none;
}
.hud > *{pointer-events:auto}
.logo-slot{display:flex;align-items:center;gap:9px;cursor:pointer;padding:6px 10px 6px 6px;border-radius:12px;background:rgba(0,0,0,.42);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.5)}
.logo-slot:hover{border-color:var(--orange)}
.logo-slot img{height:34px;width:auto}
.logo-fallback{font-family:'Big Shoulders Display',Impact,sans-serif;font-size:23px;font-weight:900;letter-spacing:.02em;line-height:1;color:#fff}
.logo-fallback .d{color:var(--orange)}
.logo-slot .tag{font-size:9.5px;color:#fff;letter-spacing:.05em;line-height:1.15;max-width:86px}
.vol{
  display:flex;flex-direction:column;align-items:center;gap:6px;padding:9px 7px 11px;border-radius:99px;
  background:rgba(0,0,0,.42);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.5);
}
.vol .ic{font-size:17px;line-height:1;color:#fff;padding:2px 4px}
/* The slider stands on end: the track is drawn horizontally and turned, so
   up is louder. The rail reserves the turned width as height. */
.vol .rail{position:relative;width:22px;height:96px}
.vol input[type=range]{position:absolute;left:50%;top:50%;width:96px;height:4px;margin:0;padding:0;background:rgba(255,255,255,.4);border:none;border-radius:99px;appearance:none;cursor:pointer;transform:translate(-50%,-50%) rotate(-90deg)}
.vol input[type=range]::-webkit-slider-thumb{appearance:none;width:13px;height:13px;border-radius:50%;background:var(--orange);cursor:pointer}
.vol input[type=range]::-moz-range-thumb{width:13px;height:13px;border:none;border-radius:50%;background:var(--orange)}

.arrow{
  position:absolute;top:50%;transform:translateY(-50%);z-index:5;
  width:48px;height:48px;border-radius:50%;
  background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.7);
  display:grid;place-items:center;font-size:24px;color:#fff;backdrop-filter:blur(6px);
}
.arrow.l{left:12px}.arrow.r{right:12px}
.arrow:hover{background:var(--orange);border-color:var(--orange)}
.arrow:disabled{opacity:.25;cursor:not-allowed}

.playbtn{
  position:absolute;inset:0;margin:auto;width:80px;height:80px;border-radius:50%;z-index:4;
  background:rgba(255,106,31,.92);display:grid;place-items:center;font-size:30px;color:#fff;
  box-shadow:0 10px 34px rgba(209,58,34,.5);
}
.playbtn:hover{transform:scale(1.06)}
.playbtn.hide{display:none}

.vframe .overlay{
  position:absolute;left:0;right:0;bottom:0;z-index:4;
  padding:60px 22px calc(58px + env(safe-area-inset-bottom));
  background:linear-gradient(transparent,rgba(0,0,0,.55) 35%,rgba(0,0,0,.94));
  pointer-events:none;
}
.vframe .overlay h1{font-size:34px;color:var(--orange);margin-bottom:9px}
.vframe .overlay p{font-size:14.5px;color:#fff;line-height:1.45;margin-bottom:3px}
.vframe .overlay p.sm{font-size:12.5px;color:#fff}

.dots{position:absolute;left:0;right:0;bottom:calc(30px + env(safe-area-inset-bottom));z-index:5;display:flex;gap:7px;justify-content:center}
.dots button{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.45);padding:0}
.dots button.on{background:var(--orange);width:24px;border-radius:99px}
.vcount{position:absolute;left:0;right:0;bottom:calc(12px + env(safe-area-inset-bottom));z-index:5;text-align:center;font-size:11px;color:#fff}
.scrollhint{position:absolute;right:16px;bottom:calc(14px + env(safe-area-inset-bottom));z-index:5;font-size:11px;color:#fff;animation:bob 1.6s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}

/* ============ AI AGENT ICON SLIDER ============ */
.band{padding:46px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#000}
.band h2{font-size:33px;text-align:center;color:var(--orange);margin-bottom:8px}
.band .sub{text-align:center;color:var(--text2);font-size:14.5px;max-width:56ch;margin:0 auto 26px}
.irail{display:flex;gap:14px;overflow-x:auto;padding:4px 2px 12px;scroll-snap-type:x mandatory}
.icard{
  flex:0 0 172px;scroll-snap-align:start;background:var(--panel2);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;text-align:left;
}
.icard:hover{border-color:var(--orange);transform:translateY(-3px)}
.icard .th{height:128px;position:relative;overflow:hidden;background:linear-gradient(150deg,#2a1d16,#121016)}
.icard .th img{width:100%;height:100%;object-fit:cover}
.icard .th .g{position:absolute;inset:0;display:grid;place-items:center;font-size:38px}
.icard .th .pl{
  position:absolute;right:9px;bottom:9px;width:29px;height:29px;border-radius:50%;
  background:rgba(255,106,31,.92);display:grid;place-items:center;font-size:12px;color:#fff;
}
.icard .bd{padding:11px 13px 14px}
.icard .bd h3{font-size:16px;margin-bottom:5px}
.icard .bd p{font-size:11.5px;color:var(--muted);line-height:1.45}

/* ============ SHARE BUTTON (radial) ============ */
.sharezone{margin:6px 0 22px;display:flex;flex-direction:column;align-items:center;gap:6px;position:relative;z-index:20}
.radial{position:relative;width:60px;height:60px;display:grid;place-items:center}
.sharemain{position:relative;z-index:2;width:48px;height:48px;border-radius:50%;padding:0;overflow:hidden;display:grid;place-items:center}
.sharemain img{width:100%;height:100%;object-fit:cover}
.sharemain .dflt{position:relative;width:48px;height:48px;display:grid;place-items:center}
.sharemain .dflt .core{width:31px;height:31px;border-radius:50%;background:#3aa84f;display:grid;place-items:center;box-shadow:0 0 12px rgba(58,168,79,.55);animation:pulse 2s ease-in-out infinite}
.sharemain .dflt .core svg{width:16px;height:16px}
.sharemain .dflt .ring{position:absolute;inset:0;animation:spin 9s linear infinite}
.sharemain .dflt .ring i{position:absolute;width:6px;height:6px;border-radius:50%;left:50%;top:50%;margin:-3px}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
.sharemain:hover .core{background:#45c05c}
.ritems{position:absolute;left:50%;top:50%;width:0;height:0;z-index:1;pointer-events:none}
.ritems::after{content:'';position:absolute;left:-125px;top:-125px;width:250px;height:250px;border-radius:50%;background:#050505;box-shadow:0 0 0 1px rgba(255,255,255,.35),0 12px 40px rgba(0,0,0,.9);opacity:0;transform:scale(.4);transition:opacity .2s,transform .3s}
.radial.open .ritems::after{opacity:1;transform:scale(1)}
.ritem{
  position:absolute;left:0;top:0;z-index:1;width:40px;height:40px;margin:-20px;border-radius:50%;
  display:grid;place-items:center;color:#fff;font-size:15px;font-weight:700;border:1px solid rgba(255,255,255,.85);
  overflow:hidden;opacity:0;transform:translate(0,0) scale(.3);
  transition:transform .38s cubic-bezier(.3,1.4,.5,1),opacity .25s;pointer-events:none;
}
.ritem img{width:100%;height:100%;object-fit:cover}
.radial.open .ritem{opacity:1;transform:translate(var(--x),var(--y)) scale(1);pointer-events:auto}
.ritem:hover{box-shadow:0 0 0 3px var(--orange)}
.sharelbl{font-size:13px;font-weight:600;color:#fff;text-align:center}
.sharelbl:empty{display:none}

/* store badges -- the app's own (.exx-store-badge in app.css), redrawn here */
.fstores{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:-6px 0 18px}
.fstores:empty{display:none}
.exx-store-badge{display:inline-flex;align-items:center;gap:8px;text-decoration:none;background:#0c0c0f;color:#faf9f6;
  border:1px solid rgba(250,249,246,.35);border-radius:9px;padding:6px 11px;line-height:1.05;flex:0 0 auto;transition:border-color .15s,transform .15s}
.exx-store-badge:hover{border-color:var(--gold);transform:translateY(-1px)}
.exx-store-ico{display:flex;align-items:center}
.exx-store-txt{display:flex;flex-direction:column;text-align:left}
.exx-store-txt small{font-size:8px;text-transform:uppercase;letter-spacing:.06em;opacity:.85}
.exx-store-txt b{font-size:14px;font-weight:600;letter-spacing:.01em}
/* footer brand */
.fbrand{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;margin-bottom:24px}
.fbrand .flogo img{max-height:70px;max-width:220px;width:auto}
.fbrand .flogo .txt{font-family:'Big Shoulders Display',Impact,sans-serif;font-size:42px;font-weight:900;line-height:1;color:#fff}
.fbrand .flogo .txt .d{color:var(--orange)}
.fbrand .fname{font-family:'Big Shoulders Display',Impact,sans-serif;font-size:24px;font-weight:800;letter-spacing:.03em;color:#fff;margin-top:4px}
.fbrand .ftag{font-size:14px;color:#fff}

/* ============ FLOATING MINI PLAYER ============ */
.mini{
  position:fixed;z-index:95;width:min(260px,44vw);aspect-ratio:9/16;
  border-radius:16px;overflow:hidden;background:#000;border:1px solid var(--line2);
  box-shadow:var(--shadow);display:none;touch-action:none;
}
.mini.on{display:block}
.mini video,.mini .poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
.mini .poster{display:grid;place-items:center;font-size:40px;background:linear-gradient(160deg,#241a14,#0d0c10)}
.mini .grip{
  position:absolute;top:0;left:0;right:0;height:38px;cursor:grab;z-index:4;
  background:linear-gradient(rgba(8,8,10,.85),transparent);display:flex;align-items:center;padding:0 9px;gap:7px;
}
.mini .grip:active{cursor:grabbing}
.mini .grip .t{font-size:11px;font-weight:600;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mini .x{
  width:25px;height:25px;border-radius:50%;background:rgba(209,58,34,.92);
  display:grid;place-items:center;font-size:13px;color:#fff;flex:0 0 25px;
}
.mini .mvol{
  position:absolute;right:8px;top:44px;z-index:4;display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:6px 4px 8px;border-radius:99px;background:rgba(0,0,0,.5);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.45);
}
.mini .mvol .ic{font-size:14px;line-height:1;color:#fff;padding:1px 3px}
.mini .mvol .rail{position:relative;width:18px;height:70px}
.mini .mvol input[type=range]{position:absolute;left:50%;top:50%;width:70px;height:4px;margin:0;padding:0;background:rgba(255,255,255,.4);border:none;border-radius:99px;appearance:none;cursor:pointer;transform:translate(-50%,-50%) rotate(-90deg)}
.mini .mvol input[type=range]::-webkit-slider-thumb{appearance:none;width:12px;height:12px;border-radius:50%;background:var(--orange);cursor:pointer}
.mini .mvol input[type=range]::-moz-range-thumb{width:12px;height:12px;border:none;border-radius:50%;background:var(--orange)}
.mini .cap{
  position:absolute;left:0;right:0;bottom:0;padding:26px 12px 11px;z-index:3;pointer-events:none;
  background:linear-gradient(transparent,rgba(8,8,10,.94));font-size:11.5px;color:#fff;line-height:1.4;
}
/* The team bio is the same small box: no veil, the page scrolls under it,
   the grip drags it. It is as tall as its words, up to 70% of the screen,
   and the words scroll inside when they do not fit. */
.mini.bio{aspect-ratio:auto;width:min(300px,44vw);max-height:min(70vh,560px);flex-direction:column;touch-action:auto}
.mini.bio.on{display:flex}
.mini.bio .grip{position:relative;flex:0 0 40px;height:40px;background:#0d0d0d;border-bottom:1px solid var(--line);touch-action:none}
.mini.bio .grip .t{font-family:'Big Shoulders Display',Impact,'Arial Narrow',sans-serif;font-weight:800;font-size:17px;letter-spacing:.01em;text-transform:uppercase}
.mini.bio .bbody{overflow-y:auto;min-height:0;padding:10px 12px 13px;-webkit-overflow-scrolling:touch;touch-action:pan-y;overscroll-behavior:contain}
.mini.bio .bbody img{display:block;width:100%;aspect-ratio:1;object-fit:cover;object-position:center top;border-radius:10px;margin-bottom:9px}
.mini.bio .role{color:var(--orange);font-weight:600;font-size:12.5px;margin-bottom:6px}
.mini.bio .words{font-size:12.5px;line-height:1.6;color:#fff}
@media(max-width:700px){ .mini{width:70vw;max-height:70vh;aspect-ratio:9/16} .mini.bio{width:70vw;aspect-ratio:auto} }

/* ============ DOC TABS ============ */
.docs{padding:46px 0;background:#000}
/* The number of documents is content, not layout: the admin can publish three
   or six. renderDocs() sets --tabs, so the count comes from the document while
   the SHAPE stays in the stylesheet — which is what lets the phone rule below
   override it. It used to be written as an inline grid-template-columns, and an
   inline style cannot be overridden by a media query: five documents therefore
   stayed five columns down to 320px, where "MEMORANDUM" is 79px of word in a
   50px button and hung out of both sides (reported 2026-09-22). */
.tabhead{display:grid;grid-template-columns:repeat(var(--tabs,3),1fr);gap:10px}
.tabhead button{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  padding:16px 6px 13px;border:1px solid var(--line);border-radius:var(--r);background:#000;color:#fff;
  font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;line-height:1.2;text-align:center;min-width:0;
}
.tabhead button .ti{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font-size:22px;border:1px solid #fff;background:#0d0d0d;overflow:hidden}
.tabhead button .ti img{width:100%;height:100%;object-fit:cover}
.tabhead button:hover{border-color:var(--orange)}
.tabhead button.on{color:var(--orange);border-color:var(--orange);background:rgba(255,106,31,.1);box-shadow:0 0 0 1px var(--orange)}
.tabhead button.on .ti{background:var(--orange);border-color:var(--orange);color:#fff}
.tabpane{display:none;margin-top:16px}
.tabpane.on{display:block;animation:slideDown .35s ease-out}
@keyframes slideDown{from{opacity:0;transform:translateY(-14px);clip-path:inset(0 0 100% 0)}to{opacity:1;transform:none;clip-path:inset(0 0 0 0)}}
.dpanel{border:1px solid var(--orange);border-radius:var(--r);overflow:hidden;background:#000}
.dpanel .dh{display:flex;align-items:center;gap:10px;padding:13px 14px 13px 17px;background:#0d0d0d;border-bottom:1px solid var(--line)}
.dpanel .dh h3{font-size:21px;flex:1;min-width:0}
.dpanel .dx{width:36px;height:36px;border-radius:50%;border:1px solid #fff;display:grid;place-items:center;font-size:16px;color:#fff;flex:0 0 36px}
.dpanel .dx:hover{background:var(--red);border-color:var(--red)}
.dpanel .db{padding:18px 17px 20px}
.dpanel .blurb{color:#fff;font-size:14px;margin-bottom:18px;max-width:70ch}
.dpanel .dl{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
/* BELOW 560px THE TILES WRAP INSTEAD OF SHRINKING. auto-fit with a floor means
   the row decides how many fit and puts the rest on the next line — three
   across on a 390px phone, two on a 320px one — so a label always has the width
   it needs and the row never scrolls sideways. */
@media(max-width:560px){
  .tabhead{grid-template-columns:repeat(auto-fit,minmax(102px,1fr));gap:8px}
  .tabhead button{font-size:10px;padding:14px 6px 12px;hyphens:auto}
  .tabhead button .ti{width:42px;height:42px;font-size:20px}
}
@media(max-width:420px){ .tabhead{gap:7px} .tabhead button{font-size:9.5px;padding:13px 4px 11px} .tabhead button .ti{width:40px;height:40px;font-size:19px} }


.pdfbox{background:#000;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.pdfbox .ph{padding:13px 17px;background:var(--panel2);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:11px}
.pdfbox .ph h3{font-size:18px;flex:1}
.pdfbox iframe{width:100%;height:560px;border:none;background:#2a2a2a;display:block}
.dpanel iframe{width:100%;height:560px;border:1px solid var(--line);border-radius:var(--r-sm);background:#2a2a2a;display:block}
.dpanel .empty{padding:40px 16px;text-align:center;color:#fff;font-size:13.5px;border:1px dashed var(--line);border-radius:var(--r-sm)}
.dpanel .empty .g{font-size:36px;display:block;margin-bottom:10px;opacity:.7}
.pdfbox .empty{padding:56px 22px;text-align:center;color:#fff;font-size:13.5px}
.pdfbox .empty .g{font-size:40px;display:block;margin-bottom:12px;opacity:.6}

/* ============ PRE-IPO BAND ============ */
.preipo{padding:46px 0;border-top:1px solid var(--line);background:#000}
.preipo h2{font-size:34px;text-align:center;color:var(--orange);margin-bottom:9px}
.preipo .sub{text-align:center;color:var(--text2);font-size:14.5px;max-width:58ch;margin:0 auto 28px}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:13px;margin-bottom:30px}
.kpi{background:var(--panel2);border:1px solid var(--line);border-left:3px solid var(--orange);border-radius:var(--r);padding:17px 19px;text-align:center}
.kpi .k{font-size:10.5px;color:#fff;font-weight:700;letter-spacing:.06em;margin-bottom:8px}
.kpi .v{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:26px;font-weight:600;color:var(--gold);line-height:1}
.kpi .d{font-size:11px;color:var(--muted);margin-top:7px}

.acc{display:none;margin-top:14px;border:1px solid var(--orange);border-radius:var(--r);overflow:hidden;background:#000}
.acc.open{display:block;animation:slideDown .35s ease-out}
.acc .dh{display:flex;align-items:center;gap:10px;padding:13px 14px 13px 17px;background:#0d0d0d;border-bottom:1px solid var(--line)}
.acc .dh h3{font-size:21px;flex:1;min-width:0}
.acc .dx{width:36px;height:36px;border-radius:50%;border:1px solid #fff;display:grid;place-items:center;font-size:16px;color:#fff;flex:0 0 36px}
.acc .dx:hover{background:var(--red);border-color:var(--red)}
.acc .ab{padding:4px 18px 6px}
.accstart{padding:0 18px 18px}
.accstart .startcard:not(.hasimg){min-height:180px}
.acc .ab h4{font-size:16px;margin:18px 0 9px;color:var(--gold)}
.acc .ab p{font-size:13px;color:var(--text2);margin-bottom:11px;line-height:1.55}
.acc .ab ul{list-style:none;padding:0;margin:0 0 12px}
.acc .ab li{position:relative;padding-left:23px;margin-bottom:9px;font-size:12.5px;color:var(--text2);line-height:1.5}
.acc .ab li::before{content:'✓';position:absolute;left:0;top:0;color:var(--green);font-weight:700}
.acc .ab li b{color:#fff}

.startrow{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:24px}
.startcard{
  position:relative;border-radius:var(--r);overflow:hidden;min-height:196px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(140deg,#2a1710,#0e0d11);border:1px solid var(--line2);
}
.startcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.42}
.startcard.hasimg{display:block;min-height:0;background:#000}
.startcard.hasimg img{position:static;display:block;width:100%;height:auto;aspect-ratio:1000/443;opacity:1}
.startcard.hasimg .in{padding:12px 14px 16px;width:100%}
.startcard.hasimg p{margin-bottom:12px}
.startcard.hasimg .btn{padding:9px 16px;font-size:13px}
.startcard .in{position:relative;text-align:center;padding:26px 20px}
.startcard h3{font-family:'Big Shoulders Display',Impact,sans-serif;font-size:36px;font-weight:900;margin-bottom:6px;letter-spacing:.02em}
.startcard p{font-size:12.5px;color:#fff;margin-bottom:17px}

/* ============ TEAM ============ */
.team{padding:46px 0;border-top:1px solid var(--line);background:#000}
.team h2{font-family:Inter,system-ui,sans-serif;font-weight:500;font-size:30px;letter-spacing:0;margin-bottom:6px;color:#fff}
.team .sub{color:#fff;font-size:14px;margin-bottom:16px}
.team .sub:empty{display:none}
.tslider{position:relative;margin-top:14px;padding:10px;border-radius:12px;background:linear-gradient(135deg,#1d1535,#120f22 60%,#241536)}
.trail{display:flex;gap:6px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.trail::-webkit-scrollbar{display:none}
.tcard{flex:0 0 calc((100% - 18px)/4);scroll-snap-align:start;display:flex;flex-direction:column;gap:6px;min-width:0;cursor:pointer;text-align:left;color:#fff}
.tcard .ph{position:relative;aspect-ratio:218/250;border-radius:4px;overflow:hidden;background:linear-gradient(150deg,#2a1d16,#121016)}
.tcard .ph img{width:100%;height:100%;object-fit:cover;object-position:center top}
.tcard .ph .g{position:absolute;inset:0;display:grid;place-items:center;font-size:30px;opacity:.6}
.tcard .nm{padding:0 2px 2px;min-height:3.4em}
.thint{text-align:center;font-size:12px;color:#fff;opacity:.8;margin-top:10px}
.tcard .ph::after{content:'i';position:absolute;right:5px;top:5px;width:16px;height:16px;border-radius:50%;background:rgba(0,0,0,.6);border:1px solid #fff;color:#fff;font:italic 700 10px/15px Georgia,serif;text-align:center}
.tcard .nm b{display:block;font-style:italic;font-weight:500;font-size:clamp(10px,2.9vw,17px);line-height:1.15;color:#fff;overflow-wrap:anywhere}
.tcard .nm small{display:block;font-size:clamp(7px,2vw,11.5px);line-height:1.2;color:#e8e8f0;margin-top:1px}
.tcard .bio{display:none!important;flex:1;padding:8px 7px;border:1px solid rgba(255,255,255,.18);border-radius:6px;background:rgba(20,18,50,.75);
  font-size:clamp(7px,1.95vw,11.5px);line-height:1.45;color:#e6e6ef;display:-webkit-box;-webkit-line-clamp:12;-webkit-box-orient:vertical;overflow:hidden}
.tcard:hover .ph{box-shadow:0 0 0 2px var(--orange)}
.tnav{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:12px}
.tnav button{width:34px;height:34px;border-radius:50%;border:1px solid #fff;color:#fff;font-size:18px;display:grid;place-items:center}
.tnav button:disabled{opacity:.3}
.tnav button:hover:not(:disabled){background:var(--orange);border-color:var(--orange)}
.tdots{display:flex;gap:6px}
.tdots i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.35);cursor:pointer}
.tdots i.on{background:var(--orange);width:20px;border-radius:9px}
@media(min-width:900px){ .tcard{flex-basis:calc((100% - 18px)/4)} }

/* ============ WANTED BANNER ============ */
.wanted{position:relative;display:block;min-height:290px;border-top:1px solid var(--line);overflow:hidden;background:#000}
.wanted img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s}
.wanted::after{content:'';position:absolute;inset:0;background:linear-gradient(rgba(0,0,0,.55),rgba(0,0,0,.35) 50%,rgba(0,0,0,.65));pointer-events:none}
.wanted .in{z-index:1}
.wanted:hover img{transform:scale(1.04)}
.wanted .wtap{display:inline-block;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#fff;border-bottom:1px solid #fff;padding-bottom:2px}
.wanted .wtap:empty{display:none}
.wanted .in{position:relative;padding:70px 20px;text-align:center;max-width:1160px;margin:0 auto}
.wanted h2{font-family:'Big Shoulders Display',Impact,sans-serif;font-size:clamp(30px,5vw,48px);font-weight:900;margin-bottom:11px;color:#fff;text-shadow:0 2px 14px rgba(0,0,0,.8)}
.wanted p{font-size:15px;color:#fff;max-width:52ch;margin:0 auto 18px;text-shadow:0 1px 8px rgba(0,0,0,.9)}

/* ============ FOOTER ============ */
footer{background:#000;border-top:1px solid var(--line);padding:36px 0 calc(8px + env(safe-area-inset-bottom))}
.fend{border-top:1px solid #fff;margin-top:26px}
.flinks{display:flex;gap:9px;justify-content:center;flex-wrap:wrap;margin-bottom:14px}
.flinks a,.flinks button{font-size:12.5px;color:#fff}
.flinks a:hover,.flinks button:hover{color:var(--orange)}
.flinks .sep{color:#fff}
footer .legalline{text-align:center;font-size:11.5px;color:#fff;line-height:1.6;max-width:80ch;margin:0 auto}
footer .legalline b{color:#fff}

/* ============ MODALS ============ */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.88);backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;z-index:100;padding:20px}
.modal.on{display:flex}
.mbox{background:#000;border:1px solid var(--line2);border-radius:16px;width:100%;max-width:560px;max-height:88vh;display:flex;flex-direction:column;box-shadow:var(--shadow)}
.mbox.wide{max-width:900px}
.mh{padding:16px 20px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px}
.mh h3{font-size:22px}
.mh .x{margin-left:auto;width:31px;height:31px;border-radius:50%;background:var(--panel3);display:grid;place-items:center;color:#fff;font-size:16px}
.mh .x:hover{background:var(--red);color:#fff}
.mb{padding:20px;overflow-y:auto;min-height:0}
.mf{padding:14px 20px;border-top:1px solid var(--line);display:flex;gap:10px;justify-content:flex-end;background:#000}

.linklist{display:flex;flex-direction:column;gap:8px}
.linklist a{
  display:flex;align-items:center;gap:20px;padding:13px 16px;border-radius:var(--r-sm);
  background:#000;border:1px solid var(--line);color:#fff;font-weight:600;font-size:14px;
}
.linklist a:hover{border-color:var(--orange)}
/* The mark sits in a fixed box, so every name starts at the same place --
   a wide wordmark and a single emoji line up alike. */
.linklist a .g{font-size:19px;flex:0 0 84px;height:46px;display:flex;align-items:center;justify-content:center}
.linklist a .g img{max-width:84px;max-height:46px;width:auto;height:auto;object-fit:contain;display:block}
.linklist a small{display:block;font-weight:400;font-size:11.5px;color:#fff;margin-top:2px}

/* ---- the investor panel: the welcome line in its header, and the offering
   conditions AS the panel's own first content (offering-conditions.html:
   orange underlined title, the ❖ sub-heading, the green-check list). The
   panel slides down and shows it; nothing pops up. */
.acc .dh{flex-wrap:wrap}
.acc .dh h3{flex:0 1 auto}
.acc .dh .wt{flex:1 1 220px;min-width:0;color:var(--orange);font-family:'Big Shoulders Display',Impact,sans-serif;font-weight:800;font-size:19px;letter-spacing:.02em;line-height:1.1}
.acc .ab .condbox{margin:14px 0 6px;padding:16px 16px 6px;border:2px solid #2bb862;border-radius:14px;background:#050505}
.acc .ab .condbox .ct{margin:0 0 14px;color:var(--orange);font-size:18px;font-weight:700;text-decoration:underline;text-underline-offset:5px;text-align:center;line-height:1.25}
.acc .ab .condbox p{font-size:14px;line-height:1.55;color:#f2f2f2;margin:0 0 18px}
.acc .ab .condbox h4{margin:0 0 14px;color:var(--orange);font-size:15px;font-weight:600;text-decoration:underline;text-underline-offset:4px;display:flex;gap:10px;align-items:baseline}
.acc .ab .condbox h4::before{content:'❖';font-size:13px;color:var(--orange)}
.acc .ab .condbox ul{list-style:none;margin:0 0 6px;padding:0}
.acc .ab .condbox li{display:grid;grid-template-columns:24px 1fr;gap:10px;align-items:start;padding:0;margin-bottom:11px;font-size:13.5px;line-height:1.5;color:#f2f2f2}
.acc .ab .condbox li::before{content:none}
.acc .ab .condbox li .ck{width:20px;height:20px;border-radius:5px;background:#2bb862;color:#fff;display:grid;place-items:center;font-size:12px;font-weight:700;margin-top:2px}
.acc .ab .condbox li b{font-weight:700;color:#fff}

/* The ExxSun page: the logo alone in the middle of the HUD, larger, with no
   box around it; the volume control keeps its corner. */
/* THE MENU, WHERE PEOPLE LOOK FOR ONE. The logo has always opened the
   platforms menu, but nothing about a logo says "tap me for a menu", and
   visitors never found it (Simon, 2026-09-23). Three bars and the word, top
   left, in the same glass as the volume control opposite. It opens the SAME
   menu the logo does; the logo keeps working for those who know. */
.menubtn{position:absolute;left:16px;top:max(14px,env(safe-area-inset-top));display:flex;flex-direction:column;align-items:center;gap:5px;
  padding:10px 9px 8px;border-radius:14px;background:rgba(0,0,0,.42);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.5);color:#fff;cursor:pointer}
.menubtn:hover,.menubtn:focus-visible{border-color:var(--orange)}
.menubtn .bars{display:flex;flex-direction:column;gap:4px;width:22px}
.menubtn .bars i{display:block;height:2.5px;border-radius:2px;background:#fff}
.menubtn .mt{font-size:9px;font-weight:800;letter-spacing:.12em;line-height:1}
/* Day / night, under MENU in the same glass (Simon, 2026-10-05: "give it the
   light version and the toggle, for both IPO pages"). The page's own choice
   is the app's: html[data-theme], kept by the site's theme.js. A moon at
   night, a sun by day; they turn and cross-fade into each other. */
.thembtn{position:absolute;left:16px;top:calc(max(14px,env(safe-area-inset-top)) + 66px);display:grid;justify-items:center;row-gap:5px;
  width:50px;padding:8px 0 7px;border-radius:14px;background:rgba(0,0,0,.42);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.5);color:#fff;cursor:pointer}
.thembtn:hover,.thembtn:focus-visible{border-color:var(--orange)}
.thembtn svg{width:22px;height:22px;grid-area:1/1;transition:opacity .45s ease,transform .55s cubic-bezier(.34,1.56,.64,1)}
.thembtn .mt{grid-area:2/1;font-size:9px;font-weight:800;letter-spacing:.12em;line-height:1}
.thembtn .th-moon{fill:#ffe9b0;filter:drop-shadow(0 0 5px rgba(255,214,120,.6))}
.thembtn .th-sun{fill:#ffb020;stroke:#ffb020;stroke-width:2.2;stroke-linecap:round;opacity:0;transform:rotate(-120deg) scale(.4)}
.thembtn .th-d{display:none}
html[data-theme="light"] .thembtn .th-moon{opacity:0;transform:rotate(120deg) scale(.4)}
html[data-theme="light"] .thembtn .th-sun{opacity:1;transform:none}
html[data-theme="light"] .thembtn .th-d{display:inline}
html[data-theme="light"] .thembtn .th-n{display:none}
/* with the logo on the left (not centred) it would sit under the button */
.hud:not(.center){padding-left:84px}
.hud.center{justify-content:center}
.hud.center .logo-slot{background:none;border:0;backdrop-filter:none;padding:0}
.hud.center .logo-slot img{height:clamp(58px,17vw,96px)}
.hud.center .vol{position:absolute;right:16px;top:max(14px,env(safe-area-inset-top))}

/* The welcome card after the video (the PDF's "insert this section after
   the video"): a hairline, WELCOME TO, the company in orange, Corporation in
   white, the offering, the regulation, and the orange pill. */
.welcomecard{padding:34px 0 30px;background:radial-gradient(120% 90% at 50% 0%,#3a2010 0%,#0c0c0c 55%,#000 100%);border-bottom:1px solid var(--line)}
.wcard{max-width:560px;margin:0 auto;text-align:center;padding:0 8px}
.wcard .hr{height:1px;background:var(--orange);opacity:.9;margin:0 auto}
.wcard .kick{font-size:13px;letter-spacing:.32em;color:#f4b07a;font-weight:700;margin:26px 0 12px}
.wcard .co{font-family:'Big Shoulders Display',Impact,sans-serif;font-size:clamp(52px,14vw,74px);font-weight:900;line-height:.95;color:var(--orange)}
.wcard .corp{font-family:'Big Shoulders Display',Impact,sans-serif;font-size:clamp(40px,10.5vw,58px);font-weight:900;line-height:1;color:#fff;margin:2px 0 26px}
.wcard h2.of{font-size:clamp(28px,7.6vw,40px);color:#fff;line-height:1.15;margin:34px 0 22px}
.wcard .reg{font-size:clamp(20px,5.8vw,27px);color:var(--orange);font-weight:800}
.wcard .regsub{font-size:clamp(17px,4.8vw,22px);color:#d9d9d9;margin:4px 0 34px}
.wcard .now{display:inline-flex;align-items:center;gap:14px;background:var(--orange);color:#111;font-weight:900;font-size:clamp(18px,5.4vw,25px);letter-spacing:.02em;padding:15px 40px;border-radius:999px;text-decoration:none;box-shadow:0 0 34px rgba(255,106,31,.45)}
.wcard .now i{width:16px;height:16px;border-radius:50%;background:#fff;display:inline-block}
.wcard .note{font-size:13.5px;color:#9a9a9a;margin-top:26px}

/* The compact band: no heading, and on a phone three tiles across with the
   label only -- the PDF's "at least 3 pictures". */
.band.compact{padding:22px 0 14px}
.band.compact h2,.band.compact .sub{display:none}
@media(max-width:700px){
  .band.compact .irail{gap:10px;scroll-snap-type:none}
  .band.compact .icard{flex:0 0 calc((100% - 20px)/3)}
  .band.compact .icard .th{height:78px}
  .band.compact .icard .bd{padding:7px 6px 9px;text-align:center}
  .band.compact .icard .bd h3{font-size:11px;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .band.compact .icard .bd p{display:none}
}

/* The two animated doors under the figures: For USA Investors, For
   International Investors. Each opens its panel, like the button below it. */
.doors{display:grid;grid-template-columns:1fr 1fr;gap:13px;margin:0 0 26px}
.doors:empty{display:none}
.door{position:relative;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--panel2);padding:0;cursor:pointer;text-align:left;color:#fff}
.door img{width:100%;display:block;aspect-ratio:720/652;object-fit:cover}
.door:hover{border-color:var(--orange)}
/* Open: the same orange the old button wore, so which one is open is still
   obvious now that the picture IS the button. */
.door.on{border-color:var(--orange);box-shadow:0 0 0 1px var(--orange)}
.door .cv{position:absolute;top:8px;right:10px;width:26px;height:26px;border-radius:50%;background:rgba(0,0,0,.62);color:var(--orange);font-size:17px;line-height:26px;text-align:center;transition:transform .2s}
.door.on .cv{transform:rotate(45deg)}
/* No picture set: the door is still the way in, drawn as words. */
.door.words{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;aspect-ratio:1/1;padding:14px 8px;text-align:center}
.door.words .fl{width:64px;height:64px;border-radius:50%;border:1px solid #fff;background:#000;display:grid;place-items:center;font-size:34px;line-height:1}
.door.words .lb{font-family:'Big Shoulders Display',Impact,sans-serif;font-weight:800;font-size:clamp(13px,4vw,19px);line-height:1.05;letter-spacing:.02em}
.door.on.words .fl{border-color:var(--orange);background:var(--orange)}
.door.on.words .lb{color:var(--orange)}

@media(max-width:860px){
  .startrow{grid-template-columns:1fr}
}
@media(max-width:700px){
  .vframe{width:100vw}
  .arrow{width:40px;height:40px;font-size:20px}
  .arrow.l{left:8px}.arrow.r{right:8px}
  .band h2,.preipo h2,.team h2{font-size:27px}
  .logo-slot .tag{display:none}
  .vol .rail{height:80px}
  .vol input[type=range]{width:80px}
  .vframe .overlay h1{font-size:30px}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}