/* =========================================================================
   Slice Financial -- core stylesheet
   Real-World Asset tokenization platform
   ========================================================================= */

/* --- self-hosted webfonts --- */
/* JetBrains Mono 400 latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/JetBrainsMono-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* JetBrains Mono 400 latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/JetBrainsMono-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* JetBrains Mono 500 latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/JetBrainsMono-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* JetBrains Mono 500 latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/JetBrainsMono-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* JetBrains Mono 700 latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/JetBrainsMono-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* JetBrains Mono 700 latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/JetBrainsMono-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Poppins 200 latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: url(../fonts/Poppins-200-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Poppins 200 latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: url(../fonts/Poppins-200-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Poppins 300 latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(../fonts/Poppins-300-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Poppins 300 latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(../fonts/Poppins-300-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Poppins 400 latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/Poppins-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Poppins 400 latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/Poppins-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Poppins 500 latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/Poppins-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Poppins 500 latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/Poppins-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Poppins 600 latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/Poppins-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Poppins 600 latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/Poppins-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Poppins 700 latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/Poppins-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Poppins 700 latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/Poppins-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* -------------------------------------------------------------------------
   1. Tokens
   ------------------------------------------------------------------------- */
:root{
  --bg:#ffffff;
  --bg2:#f5f6fd;
  --panel:#ffffff;
  --panel2:#f7f8fe;
  --border:rgba(16,18,34,.12);
  --border-strong:rgba(16,18,34,.26);
  --text:#101222;
  --dim:#4a4f66;
  --dimmer:#848aa3;

  /* brand */
  --brand:#605be5;          /* Slice indigo -- primary action colour */
  --brand-deep:#4038c9;
  --brand-sky:#2ba8e8;      /* logo cyan */
  --brand-ink:#3a34a8;      /* readable on light backgrounds */
  --dark:#0d0f1c;
  --dark-2:#141833;

  --radius:14px;
  --radius-lg:22px;
  --ease:cubic-bezier(.16,.84,.44,1);

  --sans:'Poppins',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

@property --ang{syntax:'<angle>';inherits:false;initial-value:0deg;}

/* -------------------------------------------------------------------------
   2. Base
   ------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  margin:0;
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  color:var(--text);
  background:var(--bg);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block;}
a{color:inherit;text-decoration:none;}
h1,h2,h3,h4{font-weight:600;letter-spacing:-.018em;margin:0;}
p{margin:0 0 14px;}
ul{margin:0;padding:0;}
button{font:inherit;}
.mono{font-family:var(--mono);}
:focus-visible{outline:3px solid var(--brand);outline-offset:3px;border-radius:4px;}

.sf-skip{
  position:absolute;left:-9999px;top:0;z-index:999;
  background:var(--brand);color:#fff;padding:12px 20px;border-radius:0 0 10px 0;
  font-size:14px;font-weight:600;
}
.sf-skip:focus{left:0;}

.sf-wrap{
  max-width:1360px;margin:0 auto;
  padding:0 clamp(20px,4vw,40px);
  position:relative;z-index:2;
}

/* ambient grid behind everything */
.sf-bggrid{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(16,18,34,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(16,18,34,.045) 1px,transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000 30%,transparent 100%);
  mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000 30%,transparent 100%);
}

/* -------------------------------------------------------------------------
   3. Header / navigation
   ------------------------------------------------------------------------- */
.sf-header{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.88);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border);
}
.sf-header .sf-wrap{
  display:flex;align-items:center;justify-content:space-between;
  gap:18px;padding-top:14px;padding-bottom:14px;
}
/* scroll-linked progress bar (progressive enhancement) */
.sf-header::after{
  content:'';position:absolute;left:0;bottom:-1px;height:2px;width:100%;
  transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,var(--brand-sky),var(--brand));
  animation:sfProg linear;animation-timeline:scroll(root block);
  pointer-events:none;z-index:60;
}
@keyframes sfProg{from{transform:scaleX(0);}to{transform:scaleX(1);}}

.sf-logo{display:inline-flex;align-items:center;gap:10px;flex-shrink:0;}
.sf-logo img{height:34px;width:auto;}
.sf-logo-text{display:flex;flex-direction:column;line-height:1;}
.sf-logo-text b{font-size:19px;font-weight:600;letter-spacing:.14em;color:var(--text);}
.sf-logo-text span{
  font-family:var(--mono);font-size:8.5px;letter-spacing:.34em;
  text-transform:uppercase;color:var(--dimmer);margin-top:4px;
}

.sf-nav{display:flex;align-items:center;gap:30px;}
.sf-nav > a,.sf-dd > a{
  font-size:14.5px;color:var(--dim);position:relative;padding-bottom:4px;
  transition:color .2s;
}
.sf-nav > a::after,.sf-dd > a::after{
  content:'';position:absolute;left:0;bottom:0;height:2px;width:0;
  background:var(--brand);transition:width .3s var(--ease);
}
.sf-nav > a:hover,.sf-dd > a:hover{color:var(--text);}
.sf-nav > a:hover::after,.sf-dd > a:hover::after{width:100%;}
.sf-nav > a.active,.sf-dd > a.active{color:var(--text);font-weight:500;}
.sf-nav > a.active::after,.sf-dd > a.active::after{width:100%;}

/* desktop dropdown */
.sf-dd{position:relative;display:inline-flex;align-items:center;}
.sf-dd > a{display:inline-flex;align-items:center;gap:5px;}
.sf-dd .dd-caret{width:10px;height:10px;flex:0 0 10px;transition:transform .18s ease;pointer-events:none;}
.sf-dd::after{content:'';position:absolute;left:-10px;right:-10px;top:100%;height:16px;}
.sf-dd-menu{
  position:absolute;top:100%;left:50%;
  transform:translateX(-50%) translateY(6px);
  min-width:238px;padding:8px;margin-top:14px;
  background:#fff;border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:0 18px 44px rgba(16,18,34,.16);
  display:flex;flex-direction:column;gap:2px;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .16s ease,transform .16s ease,visibility .16s;
  z-index:140;
}
.sf-dd:hover > .sf-dd-menu,.sf-dd:focus-within > .sf-dd-menu{
  opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0);
}
.sf-dd:hover > a .dd-caret,.sf-dd:focus-within > a .dd-caret{transform:rotate(180deg);}
.sf-dd-menu a{
  display:block;padding:9px 12px;border-radius:9px;
  font-size:14px;line-height:1.35;white-space:nowrap;color:var(--text);
}
.sf-dd-menu a:hover,.sf-dd-menu a:focus-visible{background:#eeedfd;color:var(--brand-ink);}

/* buttons */
.sf-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:1px solid var(--dark);color:var(--dark);background:transparent;
  padding:11px 22px;border-radius:8px;
  font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  cursor:pointer;transition:background-color .25s,color .25s,border-color .25s,transform .25s,box-shadow .25s;
  min-height:46px;
}
.sf-btn:hover{background:var(--dark);color:#fff;transform:translateY(-1px);}
.sf-btn.fill{background:var(--brand);border-color:var(--brand);color:#fff;}
.sf-btn.fill:hover{
  background:var(--brand-deep);border-color:var(--brand-deep);color:#fff;
  transform:translateY(-2px);box-shadow:0 10px 26px rgba(96,91,229,.42);
}
.sf-btn.ghost{border-color:var(--border-strong);color:var(--text);background:#fff;}
.sf-btn.ghost:hover{border-color:var(--dark);background:#fff;color:var(--text);transform:translateY(-2px);}
.sf-btn[disabled]{opacity:.55;cursor:not-allowed;transform:none;}

/* -------------------------------------------------------------------------
   Login and Register in the main menu
   They are menu items like any other, set slightly apart by a hairline so
   the eye reads "pages" then "your account" rather than one list of eight.
   Register carries the accent colour so the pair is not two identical links.
   ------------------------------------------------------------------------- */
.sf-nav-sep{
  width:1px;height:17px;flex:0 0 1px;background:var(--border-strong);
  opacity:.65;margin:0 2px;
}
.sf-nav > a.sf-nav-account{font-weight:500;}
.sf-nav > a.sf-nav-account[href*="register"]{color:var(--brand-ink);}
.sf-nav > a.sf-nav-account[href*="register"]::after{background:var(--brand);}
.sf-nav > a.sf-nav-account[href*="register"]:hover{color:var(--brand-deep);}

/* In the mobile sheet they are ordinary rows; the accent keeps Register
   findable without turning it into a second button. */
.sf-mobile-menu > a[href*="register"]{color:var(--brand-ink);font-weight:500;}

/* Signed in: the account link replaces Login and Register.
   session.js marks <html> before first paint, so the menu never flashes
   the wrong state. With JS off the signed-out menu shows, which still
   works -- the account page just redirects to sign-in. */
.sf-account-link{display:none;}
.sf-signed-in .sf-account-link{display:inline-flex;}
/* The account link carries .sf-nav-account too, so it looks like its
   neighbours. Exclude it explicitly, or this rule hides the very thing the
   line above just revealed. */
.sf-signed-in .sf-nav-account:not(.sf-account-link){display:none;}
/* In the sheet, Login and Register are plain rows with no class of their own,
   so match them by where they point. The account link points at the
   dashboard, so it is not caught by this. */
.sf-signed-in .sf-mobile-menu > a[href*="auth/login"],
.sf-signed-in .sf-mobile-menu > a[href*="auth/register"]{display:none;}
/* Signed out, the separator divides the pages from Login/Register; signed in
   it divides them from Account. Either way it stays. */

.sf-nav > a.sf-account-link{align-items:center;gap:7px;color:var(--text);font-weight:500;}
.sf-account-link svg{width:17px;height:17px;flex:0 0 17px;stroke:currentColor;fill:none;stroke-width:1.9;}
.sf-nav > a.sf-account-link:hover{color:var(--brand-ink);}
.sf-mobile-menu > a.sf-account-link{gap:10px;color:var(--brand-ink);font-weight:500;}
.sf-mobile-menu > a.sf-account-link svg{width:19px;height:19px;flex:0 0 19px;}


/* mobile toggle + menu */
.sf-mobile-toggle{
  display:none;position:relative;flex:0 0 44px;width:44px;height:44px;
  border:1px solid var(--brand);border-radius:9px;background:var(--brand);
  cursor:pointer;-webkit-tap-highlight-color:transparent;
  box-shadow:0 2px 12px rgba(96,91,229,.35);
  transition:background-color .2s,border-color .2s;
}
.sf-mobile-toggle span,
.sf-mobile-toggle::before,
.sf-mobile-toggle::after{
  content:'';position:absolute;left:50%;top:50%;margin-left:-9px;margin-top:-1px;
  width:18px;height:2px;border-radius:2px;background:#fff;
  transition:transform .25s ease,opacity .2s ease;
}
.sf-mobile-toggle::before{transform:translateY(-6px);}
.sf-mobile-toggle::after{transform:translateY(6px);}
.sf-mobile-toggle.open{background:var(--brand-deep);border-color:var(--brand-deep);}
.sf-mobile-toggle.open span{opacity:0;}
.sf-mobile-toggle.open::before{transform:rotate(45deg);}
.sf-mobile-toggle.open::after{transform:rotate(-45deg);}

.sf-mobile-menu{
  display:none;position:fixed;left:0;right:0;top:71px;bottom:0;z-index:49;
  background:rgba(255,255,255,.985);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  padding:10px max(20px,env(safe-area-inset-left)) calc(40px + env(safe-area-inset-bottom));
  flex-direction:column;overflow-y:auto;overscroll-behavior:contain;
}
.sf-mobile-menu.open{display:flex;}
.sf-mobile-menu > a{
  display:flex;align-items:center;min-height:48px;padding:16px 2px;
  border-bottom:1px solid var(--border);font-size:17px;color:var(--text);
}
.sf-mobile-menu .sf-btn{margin-top:22px;width:100%;}
/* Sign out belongs with the navigation on a phone: the button in the
   header is hidden below 560px, so without this there is no way out. */
.sf-mobile-signout{margin-top:26px;}
.sf-mobile-signout button{
  display:flex;align-items:center;justify-content:center;gap:8px;
  width:100%;min-height:50px;padding:14px 18px;
  border:1px solid var(--border);border-radius:12px;background:none;
  font:inherit;font-size:16px;color:var(--dim);cursor:pointer;
}
.sf-mobile-signout button:hover{border-color:var(--text);color:var(--text);}
.sf-msub{display:block;}
.sf-msub > summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  min-height:48px;padding:16px 2px;font-size:17px;color:var(--text);
  border-bottom:1px solid var(--border);-webkit-tap-highlight-color:transparent;
}
.sf-msub > summary::-webkit-details-marker{display:none;}
.sf-msub > summary::marker{content:"";}
.sf-msub > summary::after{
  content:"";width:9px;height:9px;flex:0 0 9px;margin-right:5px;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg) translateY(-2px);transition:transform .2s ease;
}
.sf-msub[open] > summary::after{transform:rotate(-135deg) translateY(1px);}
.sf-msub .sf-sub{
  display:flex;align-items:center;min-height:46px;padding:13px 2px 13px 20px;
  font-size:15px;color:var(--dim);
  border-left:2px solid rgba(96,91,229,.5);margin-left:2px;
  border-bottom:1px solid var(--border);
}
body.sf-noscroll{overflow:hidden;}

/* The menu carries eight items now (six pages, then Login and Register),
   so it needs more room than it used to. Below this the nav wraps to a
   second line and the header grows -- measured, not guessed -- so hand
   over to the mobile sheet while there is still room to breathe. */
@media(max-width:1259px){
  .sf-nav{display:none;}
  .sf-header .sf-btn{display:none;}
  .sf-mobile-toggle{display:block;}
}

/* -------------------------------------------------------------------------
   4. Hero
   ------------------------------------------------------------------------- */
.sf-hero{
  position:relative;min-height:92vh;display:flex;align-items:center;
  overflow:hidden;background:#0a0b16;border-bottom:1px solid var(--border);
}
.sf-hero canvas{position:absolute;inset:0;width:100%;height:100%;z-index:1;opacity:.85;}
.sf-hero-photo{
  position:absolute;inset:0;z-index:0;
  background-size:cover;background-position:center;
  opacity:.34;filter:saturate(.7);
}
.sf-hero-spot{
  position:absolute;inset:0;z-index:1;pointer-events:none;transition:background .1s;
  background:radial-gradient(620px circle at var(--mx,50%) var(--my,30%),rgba(96,91,229,.22),transparent 60%);
}
.sf-hero-fade{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse 72% 62% at 50% 42%,transparent 26%,rgba(6,7,16,.94) 100%);
}
.sf-hero-content{position:relative;z-index:2;max-width:900px;padding:96px 0 72px;}
.sf-hero-content > *{opacity:0;animation:sfin .9s var(--ease) forwards;}
.sf-hero-content > *:nth-child(1){animation-delay:.10s;}
.sf-hero-content > *:nth-child(2){animation-delay:.20s;}
.sf-hero-content > *:nth-child(3){animation-delay:.30s;}
.sf-hero-content > *:nth-child(4){animation-delay:.40s;}
.sf-hero-content > *:nth-child(5){animation-delay:.50s;}
.sf-hero-content > *:nth-child(6){animation-delay:.60s;}
@keyframes sfin{from{opacity:0;transform:translateY(22px);}to{opacity:1;transform:translateY(0);}}

.sf-badge{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:#c8c5ff;background:rgba(96,91,229,.16);border:1px solid rgba(124,120,240,.55);
  padding:7px 16px 7px 12px;border-radius:22px;margin-bottom:24px;
}
.sf-badge .dot{
  width:6px;height:6px;border-radius:50%;background:var(--brand-sky);
  box-shadow:0 0 10px var(--brand-sky);animation:sfpulse 1.8s ease-in-out infinite;
}
@keyframes sfpulse{0%,100%{transform:scale(1);opacity:1;}50%{transform:scale(1.6);opacity:.5;}}

.sf-hero h1{
  font-size:clamp(38px,6.2vw,72px);line-height:1.04;font-weight:300;
  margin:0 0 22px;letter-spacing:-.02em;color:#f6f7fb;
}
.sf-hero h1 strong{font-weight:600;}
.sf-grad-text{
  background:linear-gradient(90deg,#2ba8e8,#8f8bff,#2ba8e8);
  background-size:220% auto;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:sfshift 5s linear infinite;
}
@keyframes sfshift{to{background-position:220% center;}}
.sf-hero p{font-size:clamp(16px,2vw,19px);color:#b9bdd4;max-width:640px;margin:0 0 30px;}

.sf-proofs{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 30px;padding:0;list-style:none;}
.sf-proofs li{
  display:flex;align-items:center;gap:9px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);
  border-radius:999px;padding:9px 16px;font-size:14px;color:#e7e9f5;font-weight:500;
}
.sf-proofs li::before{
  content:"";width:7px;height:7px;border-radius:50%;
  background:var(--brand-sky);flex:0 0 auto;
}
.sf-hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:48px;}
.sf-hero .sf-btn:not(.fill){border-color:rgba(255,255,255,.45);color:#f2f3fa;background:transparent;}
.sf-hero .sf-btn:not(.fill):hover{background:#fff;border-color:#fff;color:var(--dark);}
.sf-scrollcue{
  display:flex;align-items:center;gap:10px;font-family:var(--mono);
  font-size:11px;color:#868ca6;letter-spacing:.1em;text-transform:uppercase;
}
.sf-scrollcue .arrow{
  width:14px;height:14px;border-right:2px solid var(--brand-sky);border-bottom:2px solid var(--brand-sky);
  transform:rotate(45deg);animation:sfbounce 1.6s ease-in-out infinite;
}
@keyframes sfbounce{0%,100%{transform:rotate(45deg) translate(0,0);}50%{transform:rotate(45deg) translate(4px,4px);}}

/* compact page hero (inner pages) */
.sf-pagehero{
  position:relative;background:#0a0b16;border-bottom:1px solid var(--border);
  overflow:hidden;padding:clamp(70px,9vw,110px) 0 clamp(56px,7vw,84px);
}
.sf-pagehero .sf-hero-photo{opacity:.26;}
.sf-pagehero-inner{position:relative;z-index:2;max-width:840px;}
.sf-pagehero-inner > *{opacity:0;animation:sfin .8s var(--ease) forwards;}
.sf-pagehero-inner > *:nth-child(1){animation-delay:.08s;}
.sf-pagehero-inner > *:nth-child(2){animation-delay:.18s;}
.sf-pagehero-inner > *:nth-child(3){animation-delay:.28s;}
.sf-pagehero-inner > *:nth-child(4){animation-delay:.38s;}
.sf-pagehero h1{
  font-size:clamp(32px,4.8vw,56px);line-height:1.06;font-weight:300;
  letter-spacing:-.02em;color:#f6f7fb;margin:0 0 18px;
}
.sf-pagehero h1 strong{font-weight:600;}
.sf-pagehero p{font-size:clamp(15.5px,1.8vw,18.5px);color:#b9bdd4;max-width:62ch;margin:0;}
.sf-crumb{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;
  color:#8d93ad;margin-bottom:18px;
}
.sf-crumb a{color:#b8bcd2;}
.sf-crumb a:hover{color:#fff;}

/* -------------------------------------------------------------------------
   5. Marquee
   ------------------------------------------------------------------------- */
.sf-marquee-wrap{
  border-bottom:1px solid var(--border);background:var(--bg2);
  padding:20px 0;overflow:hidden;position:relative;z-index:2;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.sf-marquee{display:flex;gap:56px;width:max-content;animation:sfscroll 30s linear infinite;}
.sf-marquee-wrap:hover .sf-marquee{animation-play-state:paused;}
.sf-marquee span{
  font-family:var(--mono);font-size:12.5px;letter-spacing:.1em;
  color:var(--dim);white-space:nowrap;text-transform:uppercase;
}
.sf-marquee span b{color:var(--text);}
@keyframes sfscroll{to{transform:translateX(-50%);}}

/* -------------------------------------------------------------------------
   6. Sections
   ------------------------------------------------------------------------- */
.sf-section{padding:clamp(64px,8vw,100px) 0;border-bottom:1px solid var(--border);position:relative;z-index:2;}
.sf-section.alt{background:var(--bg2);}
.sf-section.flush{border-bottom:none;}
.sf-tag{
  display:inline-block;font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;color:#fff;background:var(--brand);
  padding:5px 11px;border-radius:4px;margin-bottom:16px;
}
.sf-section h2{font-size:clamp(28px,4vw,44px);margin:0 0 16px;font-weight:600;max-width:760px;}
.sf-section .lead{color:var(--dim);font-size:17px;max-width:680px;margin-bottom:48px;}
.sf-section .lead:last-child{margin-bottom:0;}
.sf-section .lead.tight{margin-bottom:28px;}

.reveal{
  opacity:0;transform:translateY(28px);
  transition:opacity .7s var(--ease),transform .7s var(--ease);
  transition-delay:var(--stg,0s);
}
.reveal.in{opacity:1;transform:translateY(0);}

/* -------------------------------------------------------------------------
   7. Stats + counters
   ------------------------------------------------------------------------- */
.sf-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px;}
.sf-stat{
  background:var(--panel2);border:1px solid var(--border);border-radius:var(--radius);
  padding:30px 26px;position:relative;overflow:hidden;
  transition:border-color .3s,transform .3s,box-shadow .3s;
}
.sf-stat::before{
  content:'';position:absolute;left:0;top:0;height:3px;width:0;
  background:linear-gradient(90deg,var(--brand-sky),var(--brand));
  transition:width .55s var(--ease);
}
.sf-stat:hover::before{width:100%;}
.sf-stat:hover{border-color:var(--border-strong);transform:translateY(-5px);box-shadow:0 16px 44px rgba(16,18,34,.10);}
.sf-stat .num{font-family:var(--mono);font-size:clamp(30px,4vw,42px);font-weight:700;color:var(--text);margin-bottom:8px;}
.sf-stat .lbl{font-size:13.5px;color:var(--dim);}

/* -------------------------------------------------------------------------
   8. Steps
   ------------------------------------------------------------------------- */
.sf-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:0;position:relative;}
.sf-steps.four{grid-template-columns:repeat(4,1fr);}
.sf-steps-line{position:absolute;top:34px;left:10%;right:10%;height:2px;background:var(--border);z-index:0;}
.sf-steps-line-fill{
  position:absolute;top:0;left:0;height:100%;width:0%;
  background:linear-gradient(90deg,var(--brand-sky),var(--brand));
  transition:width 1.6s var(--ease) .3s;
}
.sf-step{position:relative;z-index:1;padding:0 18px;text-align:center;}
.sf-step-num{
  width:68px;height:68px;border-radius:50%;background:#fff;border:2px solid var(--border);
  display:flex;align-items:center;justify-content:center;margin:0 auto 20px;
  font-family:var(--mono);font-size:19px;color:var(--text);transition:all .45s;
}
.sf-step.in .sf-step-num{
  border-color:var(--brand);background:var(--brand);color:#fff;
  box-shadow:0 0 0 7px rgba(96,91,229,.18);
}
.sf-step h3{font-size:18px;margin:0 0 10px;}
.sf-step p{color:var(--dim);font-size:14px;max-width:280px;margin:0 auto;}
@media(max-width:860px){
  .sf-steps,.sf-steps.four{grid-template-columns:1fr;gap:36px;}
  .sf-steps-line{display:none;}
}

/* -------------------------------------------------------------------------
   9. Cards (features / tiers / asset classes)
   ------------------------------------------------------------------------- */
.sf-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:22px;perspective:1000px;}
.sf-card{
  background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);
  overflow:hidden;transition:border-color .3s,box-shadow .3s,transform .35s var(--ease);
  transform-style:preserve-3d;will-change:transform;
}
.sf-card:hover{border-color:var(--border-strong);box-shadow:0 24px 60px rgba(16,18,34,.13);}
.sf-card-head{
  background:var(--dark);padding:13px 22px;display:flex;justify-content:space-between;gap:12px;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;color:#a9a5ff;text-transform:uppercase;
}
.sf-card-body{padding:26px;}
.sf-card-body h3{margin:0 0 8px;font-size:20px;}
.sf-card-body .site{color:var(--brand-ink);font-size:13px;margin-bottom:14px;font-weight:600;}
.sf-card-body p{color:var(--dim);font-size:14.5px;}
.sf-card-body ul{margin:0 0 18px;padding-left:18px;color:var(--dim);font-size:14px;}
.sf-card-body ul li{margin-bottom:7px;}
.sf-card-icon{
  width:56px;height:56px;border-radius:14px;background:var(--panel2);
  border:1px solid var(--border);display:flex;align-items:center;justify-content:center;
  margin-bottom:18px;
}
.sf-card-icon img{width:28px;height:28px;object-fit:contain;}
.sf-card-icon svg{width:26px;height:26px;stroke:var(--brand);fill:none;stroke-width:1.7;}
.sf-card-stats{
  display:flex;gap:22px;font-family:var(--mono);font-size:12.5px;color:var(--dim);
  border-top:1px solid var(--border);padding-top:16px;
}
.sf-card-stats b{color:var(--text);display:block;font-size:16px;}

/* -------------------------------------------------------------------------
   10. Split grid + panel rows
   ------------------------------------------------------------------------- */
.sf-split{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center;}
.sf-split.reverse > :first-child{order:2;}
.sf-visual{
  background:var(--panel2);border:1px solid var(--border);border-radius:16px;
  padding:34px;position:relative;overflow:hidden;
}
.sf-visual::before{
  content:'';position:absolute;width:230px;height:230px;top:-70px;right:-70px;pointer-events:none;
  background:radial-gradient(circle,rgba(96,91,229,.30),transparent 70%);
}
.sf-row{
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:16px 0;border-bottom:1px solid var(--border);font-size:14.5px;
  position:relative;transition:padding-left .25s;
}
.sf-row:hover{padding-left:6px;}
.sf-row:last-child{border-bottom:none;}
.sf-row b{color:var(--text);font-family:var(--mono);font-size:15px;text-align:right;}
.sf-figure{border-radius:16px;overflow:hidden;border:1px solid var(--border);box-shadow:0 26px 64px rgba(16,18,34,.14);}
.sf-figure img{width:100%;aspect-ratio:4/3;object-fit:cover;}
@media(max-width:920px){
  .sf-split{grid-template-columns:1fr;gap:32px;}
  .sf-split.reverse > :first-child{order:0;}
}

/* value list */
.sf-values{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;list-style:none;}
.sf-value{
  background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);
  padding:26px;transition:border-color .3s,transform .3s,box-shadow .3s;
}
.sf-value:hover{border-color:var(--border-strong);transform:translateY(-4px);box-shadow:0 18px 44px rgba(16,18,34,.10);}
.sf-value h3{font-size:17px;margin:0 0 8px;display:flex;align-items:center;gap:10px;}
.sf-value h3::before{
  content:'';width:9px;height:9px;border-radius:3px;flex:0 0 9px;
  background:linear-gradient(135deg,var(--brand-sky),var(--brand));
}
.sf-value p{color:var(--dim);font-size:14.5px;margin:0;}

/* -------------------------------------------------------------------------
   11. Asset slider + grid
   ------------------------------------------------------------------------- */
.sf-slider{position:relative;}
.sf-slider-track{
  display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:4px 4px 20px;margin:0 -4px;
  scrollbar-width:none;-ms-overflow-style:none;cursor:grab;
}
.sf-slider-track::-webkit-scrollbar{display:none;}
.sf-slider-track.dragging{cursor:grabbing;scroll-snap-type:none;}
.sf-slider-track > *{scroll-snap-align:start;flex:0 0 clamp(260px,32%,380px);}
.sf-slider-nav{display:flex;gap:10px;align-items:center;margin-top:6px;}
.sf-slider-btn{
  width:44px;height:44px;border-radius:50%;border:1px solid var(--border-strong);
  background:#fff;color:var(--text);display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:background-color .25s,color .25s,border-color .25s,transform .25s;
}
.sf-slider-btn:hover:not([disabled]){background:var(--brand);border-color:var(--brand);color:#fff;transform:translateY(-2px);}
.sf-slider-btn[disabled]{opacity:.35;cursor:default;}
.sf-slider-btn svg{width:18px;height:18px;}
.sf-slider-dots{display:flex;gap:7px;margin-left:8px;}
.sf-slider-dots i{width:7px;height:7px;border-radius:50%;background:var(--border-strong);transition:background .25s,width .25s;}
.sf-slider-dots i.on{background:var(--brand);width:22px;border-radius:4px;}

.sf-assets{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:22px;}
.sf-asset{
  position:relative;display:flex;flex-direction:column;text-align:left;width:100%;
  background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);
  overflow:hidden;
  transition:border-color .3s,box-shadow .3s,transform .3s var(--ease);
}
.sf-asset:hover{border-color:var(--border-strong);box-shadow:0 24px 58px rgba(16,18,34,.15);transform:translateY(-5px);}
.sf-asset:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px rgba(96,91,229,.25);}
.sf-asset-media{position:relative;aspect-ratio:16/11;overflow:hidden;background:var(--panel2);}
.sf-asset-media img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease);}
.sf-asset:hover .sf-asset-media img{transform:scale(1.06);}
.sf-asset-media::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(to top,rgba(10,11,22,.62),transparent 55%);
}
.sf-asset-class{
  position:absolute;top:12px;left:12px;z-index:2;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  background:rgba(255,255,255,.92);color:var(--text);padding:5px 10px;border-radius:999px;
}
.sf-asset-loc{
  position:absolute;left:14px;bottom:12px;z-index:2;
  font-size:12.5px;color:#e9eaf5;display:flex;align-items:center;gap:6px;
}
.sf-asset-loc svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.8;}
.sf-asset-body{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1;}
.sf-asset-body h3{font-size:18px;margin:0 0 8px;}
.sf-asset-body p{font-size:14px;color:var(--dim);margin:0 0 16px;flex:1;}
.sf-asset-more{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--brand-ink);display:inline-flex;align-items:center;gap:7px;
  align-self:flex-start;background:none;border:0;padding:0;cursor:pointer;
}
/* the trigger covers the whole card so any click opens the detail */
.sf-asset-more::before{content:"";position:absolute;inset:0;z-index:4;}
.sf-asset-more:focus-visible{outline:none;}
.sf-asset-more::after{
  content:"";width:7px;height:7px;flex:0 0 7px;
  border-right:2px solid currentColor;border-top:2px solid currentColor;
  transform:rotate(45deg);transition:transform .25s;
}
.sf-asset:hover .sf-asset-more::after{transform:rotate(45deg) translate(3px,-3px);}

.sf-filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:30px;}
.sf-chip{
  font:inherit;font-size:12.5px;letter-spacing:.03em;padding:9px 16px;border-radius:999px;
  border:1px solid var(--border);background:#fff;color:var(--dim);cursor:pointer;transition:.18s;
  min-height:40px;
}
.sf-chip:hover{border-color:var(--text);color:var(--text);}
.sf-chip[aria-pressed="true"]{background:var(--brand);border-color:var(--brand);color:#fff;font-weight:600;}

/* -------------------------------------------------------------------------
   12. Modal
   ------------------------------------------------------------------------- */
.sf-modal{
  position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;
  padding:clamp(16px,4vw,40px);
  background:rgba(8,9,18,.78);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  animation:sffade .2s ease;
}
.sf-modal[hidden]{display:none !important;}
@keyframes sffade{from{opacity:0;}to{opacity:1;}}
.sf-modal-dialog{
  position:relative;width:min(760px,100%);max-height:88vh;overflow-y:auto;
  background:#fff;border-radius:18px;box-shadow:0 30px 80px rgba(0,0,0,.45);
  animation:sfpop .26s var(--ease);
}
@keyframes sfpop{from{opacity:0;transform:translateY(16px) scale(.98);}to{opacity:1;transform:none;}}
.sf-modal-media{aspect-ratio:16/9;overflow:hidden;background:var(--panel2);border-radius:18px 18px 0 0;}
.sf-modal-media img{width:100%;height:100%;object-fit:cover;}
.sf-modal-body{padding:28px clamp(22px,4vw,36px) 32px;}
.sf-modal-body h2{font-size:clamp(22px,3vw,30px);margin:0 0 6px;}
.sf-modal-meta{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--dimmer);margin-bottom:18px;display:flex;flex-wrap:wrap;gap:8px 16px;
}
.sf-modal-body p{color:var(--dim);font-size:15px;line-height:1.72;}
.sf-modal-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px;}
.sf-modal-close{
  position:absolute;top:12px;right:12px;z-index:3;
  width:40px;height:40px;border:0;border-radius:50%;
  background:rgba(255,255,255,.92);color:var(--dark);
  font-size:24px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 18px rgba(0,0,0,.22);transition:background .2s,transform .2s;
}
.sf-modal-close:hover{background:#fff;transform:scale(1.06);}
body.sf-modal-open{overflow:hidden;}

/* -------------------------------------------------------------------------
   13. FAQ accordion
   ------------------------------------------------------------------------- */
.sf-faq-bar{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;margin-bottom:22px;}
.sf-search{position:relative;flex:1 1 320px;min-width:260px;}
.sf-search input{
  width:100%;background:#fff;border:1px solid var(--border);border-radius:999px;
  padding:13px 18px 13px 44px;font:inherit;font-size:15px;color:var(--text);
  outline:none;transition:border-color .2s,box-shadow .2s;
}
.sf-search input:focus{border-color:var(--brand);box-shadow:0 0 0 4px rgba(96,91,229,.18);}
.sf-search svg{position:absolute;left:16px;top:50%;transform:translateY(-50%);width:17px;height:17px;opacity:.4;pointer-events:none;}
.sf-faq-count{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--dimmer);margin-bottom:14px;
}
.sf-faq-group{margin-bottom:34px;}
.sf-faq-group > h2{font-size:clamp(19px,2vw,23px);margin:0 0 4px;}
.sf-faq-group > .sub{font-size:14.5px;color:var(--dim);margin:0 0 14px;}
.sf-faq-list{border-top:1px solid var(--border);}
.sf-faq-item{border-bottom:1px solid var(--border);}
.sf-faq-item > summary{
  list-style:none;cursor:pointer;padding:19px 44px 19px 0;position:relative;
  font-size:16.5px;font-weight:500;color:var(--text);line-height:1.45;transition:color .18s;
}
.sf-faq-item > summary::-webkit-details-marker{display:none;}
.sf-faq-item > summary::marker{content:"";}
.sf-faq-item > summary:hover{color:var(--brand-ink);}
.sf-faq-item > summary::after{
  content:"";position:absolute;right:8px;top:50%;width:11px;height:11px;margin-top:-7px;
  border-right:2px solid var(--dim);border-bottom:2px solid var(--dim);
  transform:rotate(45deg);transition:transform .25s ease,border-color .2s;
}
.sf-faq-item[open] > summary::after{transform:rotate(-135deg);margin-top:-2px;border-color:var(--brand);}
.sf-faq-item[open] > summary{color:var(--brand-ink);}
.sf-faq-answer{padding:0 44px 22px 0;font-size:15px;line-height:1.72;color:var(--dim);max-width:76ch;}
.sf-faq-answer p{margin:0 0 11px;}
.sf-faq-answer p:last-child{margin-bottom:0;}
.sf-faq-answer ul{margin:8px 0 12px;padding-left:19px;}
.sf-faq-answer li{margin-bottom:6px;}
.sf-faq-answer a{color:var(--brand-ink);text-decoration:underline;text-underline-offset:3px;}
.sf-faq-empty{padding:38px 0;color:var(--dim);font-size:15px;}
@media(max-width:640px){
  .sf-faq-item > summary{font-size:15.5px;padding-right:36px;}
  .sf-faq-answer{padding-right:0;font-size:14.5px;}
}

/* -------------------------------------------------------------------------
   14. Forms
   ------------------------------------------------------------------------- */
.sf-form-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:start;}
@media(max-width:920px){.sf-form-grid{grid-template-columns:1fr;gap:34px;}}
.sf-form-panel{
  background:var(--panel);border:1px solid var(--border);border-radius:18px;
  padding:clamp(24px,3.5vw,38px);box-shadow:0 18px 50px rgba(16,18,34,.07);
}
.sf-field{margin-bottom:18px;}
.sf-field label{
  display:block;font-family:var(--mono);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--dim);margin-bottom:7px;
}
.sf-field label .req{color:var(--brand);}
.sf-field input,.sf-field select,.sf-field textarea{
  width:100%;font-family:inherit;font-size:15px;color:var(--text);background:#fff;
  border:1px solid var(--border);border-radius:9px;padding:13px 14px;
  transition:border-color .2s,box-shadow .2s;
}
.sf-field textarea{min-height:140px;resize:vertical;}
.sf-field select{
  appearance:none;-webkit-appearance:none;padding-right:40px;
  background-image:linear-gradient(45deg,transparent 50%,var(--dim) 50%),linear-gradient(135deg,var(--dim) 50%,transparent 50%);
  background-position:calc(100% - 20px) calc(50% + 2px),calc(100% - 15px) calc(50% + 2px);
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
}
.sf-field input:focus,.sf-field select:focus,.sf-field textarea:focus{
  outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(96,91,229,.18);
}
.sf-field.err input,.sf-field.err select,.sf-field.err textarea{
  border-color:#c02626;box-shadow:0 0 0 3px rgba(192,38,38,.12);
}
.sf-msg{display:none;color:#c02626;font-size:12.5px;margin-top:6px;}
.sf-field.err .sf-msg{display:block;}
.sf-field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
@media(max-width:560px){.sf-field-row{grid-template-columns:1fr;gap:0;}}
.sf-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
.sf-form-note{font-size:12.5px;color:var(--dimmer);line-height:1.6;margin:14px 0 0;}
.sf-form-status{
  margin-top:16px;padding:14px 16px;border-radius:10px;font-size:14.5px;display:none;
}
.sf-form-status.ok{display:block;background:#eef7ee;border:1px solid #bcdfbc;color:#1d6b2a;}
.sf-form-status.bad{display:block;background:#fdf0f0;border:1px solid #f0c9c9;color:#a11;}

.sf-contact-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;}
.sf-contact-card{
  background:var(--panel2);border:1px solid var(--border);border-radius:var(--radius);padding:24px;
  transition:border-color .3s,transform .3s;
}
.sf-contact-card:hover{border-color:var(--border-strong);transform:translateY(-4px);}
.sf-contact-card h3{font-size:16.5px;margin:0 0 4px;}
.sf-contact-card .region{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--brand-ink);margin-bottom:10px;
}
.sf-contact-card p{font-size:14px;color:var(--dim);margin:0 0 6px;}
.sf-contact-card p:last-child{margin-bottom:0;}
.sf-contact-card b{color:var(--text);font-weight:600;}

/* -------------------------------------------------------------------------
   15. CTA band
   ------------------------------------------------------------------------- */
.sf-cta-section{padding:clamp(70px,9vw,110px) 0;text-align:center;position:relative;z-index:2;}
.sf-cta-box{
  max-width:860px;margin:0 auto;padding:clamp(40px,6vw,64px) clamp(24px,4vw,44px);
  border-radius:var(--radius-lg);position:relative;background:var(--dark);overflow:hidden;
}
.sf-cta-box::after{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:1;
  background:radial-gradient(ellipse 60% 80% at 50% 0%,rgba(96,91,229,.32),transparent 70%);
}
.sf-cta-box::before{
  content:'';position:absolute;inset:0;border-radius:var(--radius-lg);padding:1.5px;
  background:conic-gradient(from var(--ang,0deg),var(--brand-sky),var(--brand),rgba(255,255,255,.2),var(--brand-sky));
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  animation:sfrotate 6s linear infinite;pointer-events:none;z-index:3;
}
@keyframes sfrotate{to{--ang:360deg;}}
.sf-cta-box > *{position:relative;z-index:2;}
.sf-cta-box .sf-tag{background:rgba(255,255,255,.12);color:#cfcdff;}
.sf-cta-box h2{font-size:clamp(26px,3.6vw,38px);margin:0 0 16px;color:#f6f7fb;font-weight:500;}
.sf-cta-box p{color:#b9bdd4;margin:0 0 30px;font-size:16px;max-width:56ch;margin-left:auto;margin-right:auto;}
.sf-cta-links{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:34px;}
.sf-cta-links a{
  font-family:var(--mono);font-size:12px;color:#b9bdd4;
  border:1px solid rgba(255,255,255,.22);padding:9px 16px;border-radius:20px;
  transition:all .25s;min-height:38px;display:inline-flex;align-items:center;
}
.sf-cta-links a:hover{color:#fff;background:var(--brand);border-color:var(--brand);}

/* -------------------------------------------------------------------------
   16. Footer
   ------------------------------------------------------------------------- */
.sf-footer{
  background:var(--dark);color:#b9bdd4;position:relative;z-index:2;
  padding:clamp(48px,6vw,68px) 0 28px;
}
.sf-footer-grid{
  display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:36px;
  padding-bottom:36px;border-bottom:1px solid rgba(255,255,255,.12);
}
@media(max-width:900px){.sf-footer-grid{grid-template-columns:1fr 1fr;gap:30px;}}
@media(max-width:560px){.sf-footer-grid{grid-template-columns:1fr;}}
.sf-footer-brand img{height:40px;width:auto;margin-bottom:16px;}
.sf-footer-brand p{font-size:14px;color:#9096ae;max-width:34ch;}
.sf-footer h4,.sf-footer .sf-foot-h{
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:#fff;margin:0 0 16px;font-weight:500;
}
.sf-footer ul{list-style:none;}
.sf-footer li{margin-bottom:10px;}
.sf-footer a{font-size:14px;color:#9096ae;transition:color .2s;}
.sf-footer a:hover{color:#fff;}
.sf-footer address{font-style:normal;font-size:14px;color:#9096ae;line-height:1.7;}
.sf-social{display:flex;gap:10px;margin-top:16px;}
.sf-social a{
  width:38px;height:38px;border-radius:10px;border:1px solid rgba(255,255,255,.18);
  display:flex;align-items:center;justify-content:center;transition:background .25s,border-color .25s,transform .25s;
}
.sf-social a:hover{background:var(--brand);border-color:var(--brand);transform:translateY(-2px);}
.sf-social svg{width:16px;height:16px;fill:currentColor;color:#cfd2e2;}
.sf-footer-base{
  display:flex;flex-wrap:wrap;gap:12px 24px;justify-content:space-between;
  padding-top:22px;font-size:13px;color:#797f96;
}
.sf-footer-base nav{display:flex;flex-wrap:wrap;gap:8px 18px;}

/* -------------------------------------------------------------------------
   17. Long-form / legal
   ------------------------------------------------------------------------- */
.sf-prose{max-width:78ch;}
.sf-prose h2{font-size:clamp(20px,2.4vw,26px);margin:38px 0 12px;font-weight:600;}
.sf-prose h2:first-child{margin-top:0;}
.sf-prose h3{font-size:17.5px;margin:26px 0 10px;font-weight:600;}
.sf-prose p{font-size:15.5px;line-height:1.78;color:var(--dim);margin:0 0 14px;}
.sf-prose b,.sf-prose strong{color:var(--text);font-weight:600;}
.sf-prose ul,.sf-prose ol{margin:0 0 16px;padding-left:22px;color:var(--dim);font-size:15.5px;line-height:1.78;}
.sf-prose li{margin-bottom:8px;}
.sf-prose a{color:var(--brand-ink);text-decoration:underline;text-underline-offset:3px;}
.sf-prose table{width:100%;border-collapse:collapse;margin:0 0 18px;font-size:14.5px;}
.sf-prose th,.sf-prose td{border:1px solid var(--border);padding:10px 12px;text-align:left;color:var(--dim);}
.sf-prose th{background:var(--panel2);color:var(--text);font-weight:600;}
.sf-prose-wrap{overflow-x:auto;}
.sf-updated{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--dimmer);margin-bottom:26px;
}
.sf-legal-nav{
  display:flex;flex-wrap:wrap;gap:8px;margin-bottom:38px;
  padding-bottom:28px;border-bottom:1px solid var(--border);
}
.sf-legal-nav a{
  font-size:13px;padding:8px 15px;border-radius:999px;border:1px solid var(--border);
  color:var(--dim);transition:.2s;
}
.sf-legal-nav a:hover{border-color:var(--text);color:var(--text);}
.sf-legal-nav a.active{background:var(--brand);border-color:var(--brand);color:#fff;font-weight:500;}

/* -------------------------------------------------------------------------
   18. 404
   ------------------------------------------------------------------------- */
.sf-404{text-align:center;padding:clamp(70px,12vw,140px) 0;}
.sf-404 .code{
  font-family:var(--mono);font-size:clamp(64px,14vw,150px);font-weight:700;line-height:1;
  background:linear-gradient(135deg,var(--brand-sky),var(--brand));
  -webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:18px;
}
.sf-404 h1{font-size:clamp(24px,3.4vw,36px);margin:0 0 14px;font-weight:500;}
.sf-404 p{color:var(--dim);max-width:52ch;margin:0 auto 28px;}
.sf-404 .sf-hero-actions{justify-content:center;margin-bottom:0;}

/* -------------------------------------------------------------------------
   19. Motion preferences
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important;
  }
  .reveal{opacity:1;transform:none;}
  .sf-hero-content > *,.sf-pagehero-inner > *{opacity:1;animation:none;}
}

/* -------------------------------------------------------------------------
   20. Small-screen refinements
   ------------------------------------------------------------------------- */
@media(max-width:760px){
  .sf-hero{min-height:auto;}
  .sf-hero-content{padding:72px 0 56px;}
  .sf-slider-track > *{flex:0 0 min(84vw,340px);}
  .sf-footer-base{flex-direction:column;}
}
@media(min-width:1800px){
  .sf-wrap{max-width:1480px;}
}

/* =========================================================================
   21. Marketplace module
   ========================================================================= */

/* --- catalog toolbar --------------------------------------------------- */
.sf-market-bar{
  display:flex;gap:14px;flex-wrap:wrap;align-items:center;
  margin-bottom:18px;
}
.sf-market-bar .sf-search{flex:1 1 300px;min-width:240px;}
.sf-sort{display:flex;align-items:center;gap:10px;flex:0 0 auto;}
.sf-sort > span{
  font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--dimmer);
}
.sf-sort select{
  width:auto;min-width:180px;font-family:inherit;font-size:14.5px;color:var(--text);
  background:#fff;border:1px solid var(--border);border-radius:999px;
  padding:12px 40px 12px 18px;cursor:pointer;
  appearance:none;-webkit-appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--dim) 50%),
                   linear-gradient(135deg,var(--dim) 50%,transparent 50%);
  background-position:calc(100% - 21px) calc(50% + 1px),calc(100% - 16px) calc(50% + 1px);
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
  transition:border-color .2s,box-shadow .2s;
}
.sf-sort select:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 4px rgba(96,91,229,.18);}
.sf-chip-n{font-family:var(--mono);font-size:10.5px;opacity:.62;margin-left:2px;}
.sf-chip[aria-pressed="true"] .sf-chip-n{opacity:.85;}

/* --- status chip on the card ------------------------------------------ */
.sf-asset-state{
  position:absolute;top:12px;right:12px;z-index:2;
  font-family:var(--mono);font-size:10px;letter-spacing:.11em;text-transform:uppercase;
  padding:5px 10px;border-radius:999px;border:1px solid transparent;font-weight:500;
}
.sf-asset-state.chip-available{background:#e6f6ea;color:#14682f;border-color:#b6ddc0;}
.sf-asset-state.chip-reserved{background:#fdf3e0;color:#7d5700;border-color:#eed4a3;}
.sf-asset-state.chip-sold-out{background:#fdeceb;color:#a3231c;border-color:#efc4c1;}

.sf-asset-meta{display:flex;gap:9px;flex-wrap:wrap;align-items:center;margin:0 0 16px;}
.sf-asset-price{font-family:var(--mono);font-size:15px;font-weight:700;color:var(--text);}
.sf-pill{
  font-size:11px;letter-spacing:.04em;padding:4px 10px;border-radius:999px;
  background:var(--panel2);border:1px solid var(--border);color:var(--dim);
}
.sf-pill.mono{font-family:var(--mono);color:var(--brand-ink);background:#eeedfd;border-color:#d8d6f8;}
.sf-asset[hidden]{display:none !important;}

/* --- preview banner ---------------------------------------------------- */
.sf-preview-bar{
  background:#8a6100;color:#fff;font-size:14px;padding:11px 0;position:relative;z-index:3;
}
.sf-preview-bar a{color:#fff;text-decoration:underline;text-underline-offset:3px;margin-left:8px;}

/* --- detail hero ------------------------------------------------------- */
.sf-detail-hero{
  background:#0a0b16;border-bottom:1px solid var(--border);position:relative;z-index:2;
  padding:clamp(28px,5vw,48px) 0 clamp(36px,6vw,64px);
}
.sf-crumb-dark{margin-bottom:24px;}
.sf-detail-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,4vw,52px);align-items:start;}
@media(max-width:960px){.sf-detail-grid{grid-template-columns:1fr;}}

.sf-detail-side .sf-badge{margin-bottom:18px;}
.sf-detail-side h1{
  font-size:clamp(28px,4vw,46px);line-height:1.08;font-weight:300;letter-spacing:-.02em;
  color:#f6f7fb;margin:0 0 14px;
}
.sf-detail-loc{
  display:flex;align-items:center;gap:8px;font-size:14px;color:#a8adc6;margin:0 0 18px;
}
.sf-detail-loc svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.8;flex:0 0 15px;}
.sf-detail-summary{font-size:16.5px;line-height:1.65;color:#b9bdd4;margin:0 0 24px;max-width:56ch;}
.sf-detail-price{
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);
  border-radius:14px;padding:18px 22px;margin-bottom:24px;
}
.sf-detail-price .amount{
  display:block;font-family:var(--mono);font-size:clamp(22px,3vw,30px);font-weight:700;color:#fff;
}
.sf-detail-price .note{display:block;font-size:13px;color:#9096ae;margin-top:6px;}
.sf-inline-note{
  font-size:13.5px;color:#c9cde0;background:rgba(255,255,255,.05);
  border-left:3px solid var(--brand);border-radius:0 8px 8px 0;padding:12px 16px;
}

/* --- gallery ----------------------------------------------------------- */
.sf-gallery-stage{
  position:relative;border-radius:18px;overflow:hidden;
  border:1px solid rgba(255,255,255,.14);background:#11131f;
  box-shadow:0 26px 64px rgba(0,0,0,.4);
}
.sf-gallery-stage img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;}
.sf-gallery-empty{aspect-ratio:4/3;}
.sf-gallery-state{top:14px;right:14px;}
.sf-gallery-thumbs{
  display:flex;gap:10px;margin-top:12px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none;
}
.sf-gallery-thumbs::-webkit-scrollbar{display:none;}
.sf-gallery-thumb{
  flex:0 0 84px;width:84px;height:62px;padding:0;cursor:pointer;
  border:2px solid rgba(255,255,255,.18);border-radius:10px;overflow:hidden;background:#11131f;
  transition:border-color .2s,transform .2s;
}
.sf-gallery-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.sf-gallery-thumb:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.4);}
.sf-gallery-thumb.on{border-color:var(--brand-sky);}

/* --- detail body ------------------------------------------------------- */
.sf-detail-body{
  display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,.9fr);
  gap:clamp(28px,4vw,52px);align-items:start;
}
@media(max-width:960px){.sf-detail-body{grid-template-columns:1fr;}}
.sf-detail-aside{display:flex;flex-direction:column;gap:22px;position:sticky;top:96px;}
@media(max-width:960px){.sf-detail-aside{position:static;}}

/* --- token widget ------------------------------------------------------ */
.sf-token{border:1px solid var(--border);border-radius:16px;overflow:hidden;background:#fff;}
.sf-token-head{
  background:var(--dark);color:#a9a5ff;padding:13px 20px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
}
.sf-token-symbol{
  background:rgba(255,255,255,.12);color:#fff;padding:4px 10px;border-radius:999px;
  font-size:11.5px;letter-spacing:.06em;
}
.sf-token-body{padding:6px 20px 20px;}
.sf-token-row{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:14px 0;border-bottom:1px solid var(--border);font-size:14px;color:var(--dim);
}
.sf-token-row.col{flex-direction:column;align-items:stretch;gap:9px;}
.sf-token-row b{color:var(--text);font-family:var(--mono);font-size:14px;}
.sf-copy{display:flex;align-items:stretch;gap:8px;}
.sf-copy-value{
  flex:1;min-width:0;font-family:var(--mono);font-size:12.5px;color:var(--text);
  background:var(--panel2);border:1px solid var(--border);border-radius:9px;
  padding:11px 13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.sf-copy-btn{
  flex:0 0 auto;display:inline-flex;align-items:center;gap:7px;cursor:pointer;
  background:var(--brand);border:1px solid var(--brand);color:#fff;
  border-radius:9px;padding:0 14px;font-size:12.5px;font-weight:500;
  transition:background .2s,border-color .2s,transform .2s;
}
.sf-copy-btn svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.9;}
.sf-copy-btn:hover{background:var(--brand-deep);border-color:var(--brand-deep);}
.sf-copy-btn.done{background:#1d7a3a;border-color:#1d7a3a;}
.sf-token-link{
  display:inline-flex;align-items:center;gap:8px;margin-top:16px;
  font-size:13.5px;font-weight:500;color:var(--brand-ink);
}
.sf-token-link svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.9;}
.sf-token-link:hover{text-decoration:underline;text-underline-offset:3px;}
.sf-token-note{font-size:12px;color:var(--dimmer);line-height:1.55;margin:16px 0 0;}

/* --- documents --------------------------------------------------------- */
.sf-docs{border:1px solid var(--border);border-radius:16px;background:#fff;padding:22px;}
.sf-docs h2{font-size:17px;margin:0 0 4px;}
.sf-docs-sub{font-size:13px;color:var(--dim);margin:0 0 16px;}
.sf-doc-list{list-style:none;display:flex;flex-direction:column;gap:10px;}
.sf-doc{
  display:flex;align-items:center;gap:13px;
  border:1px solid var(--border);border-radius:12px;padding:13px 14px;
  transition:border-color .2s,box-shadow .2s;
}
.sf-doc:hover{border-color:var(--border-strong);box-shadow:0 8px 22px rgba(16,18,34,.07);}
.sf-doc-icon{position:relative;flex:0 0 38px;width:38px;height:44px;display:block;}
.sf-doc-icon svg{width:38px;height:38px;stroke:var(--brand);fill:none;stroke-width:1.6;}
.sf-doc-icon em{
  position:absolute;left:0;bottom:0;font-style:normal;
  font-family:var(--mono);font-size:8px;letter-spacing:.06em;
  background:var(--brand);color:#fff;padding:2px 5px;border-radius:4px;
}
.sf-doc-text{flex:1;min-width:0;}
.sf-doc-text b{display:block;font-size:14px;font-weight:500;color:var(--text);line-height:1.35;}
.sf-doc-text small{
  display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--dimmer);margin-top:4px;
}
.sf-doc-actions{display:flex;gap:7px;flex:0 0 auto;}
.sf-doc-btn{
  font-size:12px;font-weight:500;padding:8px 12px;border-radius:8px;
  border:1px solid var(--border);color:var(--dim);transition:.18s;white-space:nowrap;
}
.sf-doc-btn:hover{border-color:var(--text);color:var(--text);}
.sf-doc-btn.primary{background:var(--brand);border-color:var(--brand);color:#fff;}
.sf-doc-btn.primary:hover{background:var(--brand-deep);border-color:var(--brand-deep);color:#fff;}
@media(max-width:520px){
  .sf-doc{flex-wrap:wrap;}
  .sf-doc-actions{width:100%;}
  .sf-doc-btn{flex:1;text-align:center;}
}

/* --- aside CTA --------------------------------------------------------- */
.sf-detail-cta{
  border-radius:16px;padding:24px;background:var(--dark);color:#b9bdd4;
  position:relative;overflow:hidden;
}
.sf-detail-cta::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 70% 70% at 50% 0%,rgba(96,91,229,.30),transparent 70%);
}
.sf-detail-cta > *{position:relative;z-index:1;}
.sf-detail-cta h2{font-size:17px;color:#f6f7fb;margin:0 0 8px;font-weight:600;}
.sf-detail-cta p{font-size:13.5px;line-height:1.6;margin:0 0 18px;}

/* --- toast ------------------------------------------------------------- */
.sf-toast{
  position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(12px);
  background:var(--dark);color:#fff;font-size:14px;
  padding:12px 20px;border-radius:999px;box-shadow:0 14px 40px rgba(0,0,0,.35);
  opacity:0;pointer-events:none;transition:opacity .22s,transform .22s;z-index:9998;
}
.sf-toast.on{opacity:1;transform:translateX(-50%) translateY(0);}

/* --- screen-reader utility --------------------------------------------- */
.sf-sr-only{
  position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* A link stripped of an unsafe href is inert - do not dress it up as a link. */
.sf-prose a:not([href]){color:inherit;text-decoration:none;cursor:default;}

/* --- long-form legal: summary callout, contents, definition table -------- */
.sf-prose-note{
  border:1px solid var(--border);border-left:3px solid var(--brand);
  background:var(--panel2);border-radius:0 14px 14px 0;
  padding:22px clamp(18px,3vw,26px);margin:0 0 30px;
}
.sf-prose-note h2{font-size:17px !important;margin:0 0 12px !important;}
.sf-prose-note ul{margin:0;padding-left:20px;}
.sf-prose-note li:last-child{margin-bottom:0;}
.sf-prose-note p:last-child{margin-bottom:0;}

.sf-toc{
  border:1px solid var(--border);border-radius:14px;
  padding:20px clamp(18px,3vw,24px);margin:0 0 34px;
}
.sf-toc h2{font-size:13px !important;font-family:var(--mono);letter-spacing:.12em;
  text-transform:uppercase;color:var(--dimmer);margin:0 0 14px !important;font-weight:500;}
.sf-toc ol{
  /* Multi-column, not grid: a reader scans a contents list down one column and
     then down the next, so 1-10 must sit above each other, not beside. */
  list-style:none;padding:0;margin:0;counter-reset:sf-toc-i;
  columns:2;column-gap:30px;
}
@media(max-width:620px){.sf-toc ol{columns:1;}}
.sf-toc li{break-inside:avoid;}
.sf-toc li{margin:0;}
.sf-toc a{
  display:block;padding:5px 0;font-size:14.5px;color:var(--dim);
  text-decoration:none;border-bottom:1px solid transparent;
}
.sf-toc a:hover{color:var(--brand-ink);}
.sf-toc a::before{
  content:counter(sf-toc-i) ".";counter-increment:sf-toc-i;
  font-family:var(--mono);font-size:12px;color:var(--dimmer);margin-right:9px;
}

.sf-prose h2[id],.sf-prose h3[id]{scroll-margin-top:100px;}
.sf-prose .sf-lede{font-size:17px;color:var(--text);line-height:1.7;}
.sf-prose code{
  font-family:var(--mono);font-size:13px;background:var(--panel2);
  border:1px solid var(--border);border-radius:5px;padding:1px 6px;color:var(--brand-ink);
}
.sf-prose td code{white-space:nowrap;}
.sf-prose h4{font-size:15.5px;margin:22px 0 8px;font-weight:600;color:var(--text);}

/* --- narrow-viewport safety ---------------------------------------------
   A grid or flex child defaults to min-width:auto, so it refuses to shrink
   below the intrinsic width of what it contains. A text input carries a
   default size of about 20 characters, which is enough to push the contact
   form - and with it the whole page - sideways on a 320px phone. */
.sf-form-grid > *,
.sf-form-panel,
.sf-field,
.sf-field-row,
.sf-field-row > *,
.sf-contact-cards > *,
.sf-cards > *,
.sf-assets > *,
.sf-values > *,
.sf-stats > *{min-width:0;}
.sf-field input,
.sf-field select,
.sf-field textarea{min-width:0;}

/* --- prose tables on a phone --------------------------------------------
   A four-column table crushed into 335px wraps one word per line and hides
   its last column off the edge. Below 640px each row becomes its own block
   and every cell carries its column name, so nothing is lost and nothing
   scrolls sideways. Mark a table `sf-table-stack` to opt in. */
@media(max-width:640px){
  .sf-prose table.sf-table-stack,
  .sf-prose table.sf-table-stack tbody,
  .sf-prose table.sf-table-stack tr,
  .sf-prose table.sf-table-stack td{display:block;width:100%;}
  .sf-prose table.sf-table-stack thead{
    position:absolute;width:1px;height:1px;overflow:hidden;
    clip:rect(0 0 0 0);white-space:nowrap;
  }
  .sf-prose table.sf-table-stack tr{
    border:1px solid var(--border);border-radius:12px;
    padding:4px 0;margin-bottom:14px;background:var(--panel);
  }
  .sf-prose table.sf-table-stack tr:last-child{margin-bottom:0;}
  .sf-prose table.sf-table-stack td{
    border:0;border-bottom:1px solid var(--border);padding:11px 15px;
  }
  .sf-prose table.sf-table-stack tr td:last-child{border-bottom:0;}
  .sf-prose table.sf-table-stack td::before{
    content:attr(data-label);display:block;
    font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;
    text-transform:uppercase;color:var(--dimmer);margin-bottom:4px;
  }
  .sf-prose table.sf-table-stack td code{white-space:normal;word-break:break-all;}
}

/* ===========================================================================
   MEMBERS-ONLY CHROME

   The static pages cannot ask PHP who is signed in, so they carry both menus
   and assets/js/session.js sets .sf-signed-in on <html> from the hint cookie.
   Default to the GUEST view: if the cookie is blocked or the script is
   stopped, a visitor sees the public menu, and marketplace.php redirects them.
   Failing the other way would advertise a door that is locked.
   =========================================================================== */
.sf-members-only{display:none !important;}
.sf-signed-in .sf-members-only{display:inline-flex !important;}
.sf-signed-in .sf-mobile-menu > a.sf-members-only{display:flex !important;}
/* The mobile menu's own rule for its links is stronger than the default
   hide on .sf-account-link, so the guest case has to be restated here. */
.sf-mobile-menu > a.sf-account-link{display:none !important;}
.sf-signed-in .sf-mobile-menu > a.sf-account-link{display:flex !important;}
.sf-signed-in .sf-guests-only{display:none !important;}

/* The "KYC" flag on the Marketplace link: a warning, not a decoration. */
.sf-nav-flag{
  margin-left:6px;padding:1px 6px;border-radius:999px;
  background:var(--warn-bg,#fdf5e3);color:var(--warn,#8a6100);
  font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  vertical-align:middle;
}
.sf-foot-lock{opacity:.55;font-size:.86em;}

/* ===========================================================================
   MARKETPLACE
   =========================================================================== */
.sf-mk-head{padding:clamp(28px,4vw,46px) 0 0;}
.sf-mk-headrow{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:20px;flex-wrap:wrap;margin-top:10px;
}
.sf-mk-head h1{margin:0;font-size:clamp(28px,4vw,42px);line-height:1.1;}
.sf-mk-sub{margin:8px 0 0;color:var(--dim);font-size:15px;}
.sf-mk-who{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}

/* The KYC banner. High-visibility is the requirement, so it is a filled
   panel rather than a tinted line, and it keeps its colour on mobile. */
.sf-mk-gate-wrap{padding-top:22px;}
.sf-mk-gate{
  display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap;
  padding:18px 20px;border-radius:16px;border:1px solid;
}
.sf-mk-gate.warn{background:var(--warn-bg,#fdf5e3);border-color:#eed4a3;color:#6b4c00;}
.sf-mk-gate.bad{background:var(--danger-bg,#fdeeed);border-color:#f0c3c0;color:#8f1f18;}
.sf-mk-gate.ok{background:var(--ok-bg,#eaf6ec);border-color:#b6ddc0;color:#14682f;}
.sf-mk-gate-icon{flex:0 0 22px;margin-top:2px;}
.sf-mk-gate-icon svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;}
.sf-mk-gate-text{flex:1 1 320px;min-width:0;}
.sf-mk-gate-text b{display:block;font-size:15.5px;margin-bottom:4px;}
.sf-mk-gate-text p{margin:0;font-size:14px;line-height:1.6;opacity:.92;}
.sf-mk-gate .sf-btn{flex:0 0 auto;align-self:center;}

/* Toolbar */
.sf-mk-bar{
  display:flex;gap:12px;flex-wrap:wrap;align-items:center;
  margin:0 0 18px;
}
.sf-mk-bar .sf-search{flex:1 1 280px;min-width:0;}
.sf-mk-count{margin:14px 0 18px;color:var(--dim);font-size:12.5px;letter-spacing:.04em;}

.sf-linklike{
  border:0;background:none;padding:0;font:inherit;color:var(--brand-ink);
  text-decoration:underline;cursor:pointer;
}

/* Cards: three seconds to read, so the facts are a grid and not prose. */
.sf-mk-grid{align-items:stretch;}
.sf-mk-card .sf-asset-body{display:flex;flex-direction:column;}
.sf-mk-thesis{min-height:2.9em;}
.sf-mk-facts{
  list-style:none;margin:14px 0 0;padding:14px 0 0;
  border-top:1px solid var(--border);
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 14px;
}
.sf-mk-facts li{display:flex;flex-direction:column;gap:2px;min-width:0;}
.sf-mk-facts span{
  font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--dimmer,#6b7086);
}
.sf-mk-facts b{font-size:13.5px;font-weight:600;line-height:1.35;}
.sf-mk-locked{display:inline-flex;align-items:center;gap:5px;color:var(--warn,#8a6100);}
.sf-mk-locked svg{width:13px;height:13px;flex:0 0 13px;fill:none;stroke:currentColor;stroke-width:1.9;}
.sf-mk-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px;}
.sf-mk-note{
  margin:8px 0 0;font-size:11.5px;color:var(--dimmer,#6b7086);
}
.sf-asset-more.muted{color:var(--dim);}

.sf-pill.sm{font-size:10.5px;padding:2px 8px;}
.sf-btn.sm{padding:8px 15px;font-size:12.5px;}

/* Deal states the original three chips did not cover. */
.sf-asset-state.chip-soon{background:#eef0fd;color:#33408f;border-color:#c9cff4;}
.sf-asset-state.chip-closed{background:#f1f2f6;color:#5b6070;border-color:#d9dbe4;}

/* ===========================================================================
   DEAL ROOM
   =========================================================================== */
.sf-detail-badges{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px;}
.sf-badge.ok{background:var(--ok-bg,#eaf6ec);color:#14682f;border-color:#b6ddc0;}
.sf-badge.warn{background:var(--warn-bg,#fdf5e3);color:#7d5700;border-color:#eed4a3;}

.sf-snapshot{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px 18px;margin:22px 0 0;padding:18px 20px;
  border:1px solid var(--border);border-radius:14px;background:#fff;
}
.sf-snapshot > div{min-width:0;}
.sf-snapshot dt{
  font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--dimmer,#6b7086);margin:0 0 3px;
}
.sf-snapshot dd{margin:0;font-size:13.5px;font-weight:600;line-height:1.4;}

/* The panel that stands where the terms would be. It has to read as a
   deliberate policy, not as an error, so it explains itself. */
.sf-locked-panel{
  display:flex;gap:16px;align-items:flex-start;
  margin-top:16px;padding:22px 24px;
  border:1px dashed var(--border-strong,#c7cad6);border-radius:16px;
  background:linear-gradient(180deg,#fafbff,#f4f5fa);
}
.sf-locked-panel > span{flex:0 0 26px;margin-top:2px;}
.sf-locked-panel svg{width:26px;height:26px;fill:none;stroke:var(--dim);stroke-width:1.6;}
.sf-locked-panel b{display:block;font-size:16px;margin-bottom:8px;}
.sf-locked-panel p{margin:0 0 16px;font-size:14px;line-height:1.65;color:var(--dim);}
.sf-locked-panel.compact{padding:18px 20px;margin-top:10px;}
.sf-locked-panel.compact p{margin-bottom:12px;font-size:13.5px;}

/* ===========================================================================
   INVESTOR JOURNEY
   =========================================================================== */
.sf-journey{list-style:none;margin:30px 0 0;padding:0;display:grid;gap:12px;}
.sf-journey-step{
  display:flex;align-items:flex-start;gap:16px;
  padding:16px 18px;border-radius:14px;
  border:1px solid var(--border);background:#fff;
}
.sf-journey-step .n{
  flex:0 0 28px;width:28px;height:28px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--muted-bg,#eef0f6);color:var(--dim);
  font-size:12.5px;font-weight:700;font-family:var(--mono);
}
.sf-journey-step > div{flex:1 1 auto;min-width:0;}
.sf-journey-step b{display:block;font-size:15px;}
.sf-journey-step span:not(.n):not(.sf-journey-badge){
  display:block;margin-top:3px;font-size:13.5px;color:var(--dim);line-height:1.55;
}
.sf-journey-step a{
  display:inline-block;margin-top:8px;font-size:13.5px;font-weight:600;
  color:var(--brand-ink);
}
.sf-journey-step.done{background:#f7fbf8;border-color:#cfe7d6;}
.sf-journey-step.done .n{background:#dff0e4;color:#14682f;}
.sf-journey-step.now{border-color:var(--brand,#5b5bd6);box-shadow:0 0 0 3px rgba(91,91,214,.1);}
.sf-journey-step.now .n{background:var(--brand,#5b5bd6);color:#fff;}
.sf-journey-badge{
  flex:0 0 auto;align-self:center;
  padding:4px 11px;border-radius:999px;
  background:var(--brand,#5b5bd6);color:#fff;
  font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
}
.sf-journey.compact{margin-top:18px;gap:8px;}
.sf-journey.compact .sf-journey-step{padding:12px 15px;}
.sf-journey.compact b{font-size:14px;}

/* ===========================================================================
   HOMEPAGE: WHY THE BOOK IS NOT PUBLIC
   =========================================================================== */
.sf-access-grid{
  display:grid;gap:16px;margin-top:30px;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
}
.sf-access-card{
  padding:24px;border:1px solid var(--border);border-radius:16px;background:#fff;
}
.sf-access-card .n{
  display:block;font-size:12px;letter-spacing:.1em;
  color:var(--brand-ink);margin-bottom:12px;
}
.sf-access-card b{display:block;font-size:17px;margin-bottom:8px;}
.sf-access-card p{margin:0;font-size:14px;line-height:1.65;color:var(--dim);}

/* ===========================================================================
   NARROW SCREENS
   =========================================================================== */
@media (max-width:720px){
  .sf-mk-headrow{align-items:flex-start;}
  .sf-mk-gate{padding:16px;}
  .sf-mk-gate .sf-btn{width:100%;justify-content:center;}
  .sf-mk-bar{gap:10px;}
  .sf-mk-bar .sf-search,
  .sf-mk-bar .sf-sort{flex:1 1 100%;}
  .sf-snapshot{grid-template-columns:1fr;padding:16px;}
  .sf-locked-panel{flex-direction:column;gap:12px;padding:18px;}
  .sf-journey-step{flex-wrap:wrap;}
  .sf-journey-badge{order:3;margin-left:44px;}
}
@media (max-width:420px){
  .sf-mk-facts{grid-template-columns:1fr;}
}


/* ===========================================================================
   SESSION TIMEOUT WARNING

   Deliberately loud: it interrupts, because the alternative is losing what
   somebody has typed. Shared by the portal and the admin, so it lives in the
   stylesheet both of them load.
   =========================================================================== */
.sf-timeout{
  position:fixed;inset:0;z-index:9000;
  display:none;align-items:center;justify-content:center;padding:20px;
  background:rgba(10,12,26,.62);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
}
.sf-timeout.on{display:flex;}
.sf-timeout-card{
  width:min(420px,100%);padding:30px 30px 26px;
  background:#fff;border-radius:18px;
  box-shadow:0 24px 60px rgba(10,12,26,.3);
  text-align:left;
}
.sf-timeout-card h2{margin:0 0 10px;font-size:22px;line-height:1.2;}
.sf-timeout-card p{margin:0 0 10px;font-size:15px;line-height:1.6;color:var(--dim);}
.sf-timeout-card p b{color:var(--text);font-variant-numeric:tabular-nums;}
.sf-timeout-why{font-size:13.5px !important;color:var(--dimmer,#6b7086) !important;}
.sf-timeout-actions{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap;}
.sf-timeout-actions .sf-btn{flex:1 1 auto;justify-content:center;}

@media (max-width:420px){
  .sf-timeout-card{padding:24px 20px 20px;}
  .sf-timeout-actions .sf-btn{flex:1 1 100%;}
}

@media (prefers-reduced-motion:no-preference){
  .sf-timeout.on .sf-timeout-card{animation:sfTimeoutIn .18s ease-out;}
  @keyframes sfTimeoutIn{from{opacity:0;transform:translateY(8px) scale(.98);}to{opacity:1;transform:none;}}
}