/* ===========================
   Siegfried Asset Management
   Landing Page – Navy & Gold
   Shared tokens with sam.css
   =========================== */

/* ---- Theme tokens (copy from sam.css) ---- */
:root{
  --navy-900:#0b1e39;     /* page bg */
  --navy-800:#0f2950;
  --navy-700:#153664;     /* headers */
  --navy-600:#1e4783;
  --navy-500:#2a5aa3;
  --slate-700:#334155;    /* body text on light */
  --slate-500:#64748b;    /* muted text on light */
  --ink-100:#f7f9fc;      /* light surface */
  --ink-200:#eef3f9;
  --ink-300:#e4ecf6;
  --gold-500:#d4af37;     /* brand gold */
  --gold-600:#c5a127;
  --gold-700:#b08e18;
  --success-600:#16a34a;
  --danger-600:#dc2626;
  --warning-600:#d97706;
  --white:#ffffff;
  --black:#000000;

  --radius-xl:14px;
  --radius-lg:12px;
  --radius-md:10px;

  --shadow-1:0 6px 18px rgba(0,0,0,.18);
  --shadow-2:0 10px 28px rgba(0,0,0,.24);

  --ring:0 0 0 3px rgba(212,175,55,.25);
  --focus:0 0 0 3px rgba(42,90,163,.35);

  --font-sans: ui-sans-serif, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", system-ui, sans-serif;
}

/* ---- Global ---- */
*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}

body.sa-page{
  margin:0;
  color:#e8f0ff;
  font:15px/1.6 var(--font-sans);
  background:
    radial-gradient(1200px 700px at 20% -10%, rgba(255,255,255,.06), rgba(255,255,255,0) 60%),
    radial-gradient(900px 600px at 120% 10%, rgba(212,175,55,.10), transparent 55%),
    var(--navy-900);
}

/* Layout wrapper */
.sa-page{
  min-height:100vh;
  display:flex;
  flex-direction:column;
}
.sa-page-main{
  flex: 1 0 auto;
  padding-top: 0;   /* let content sit “under” the sticky header */
}

.sa-container{
  width:100%;
  max-width:1200px;
  margin:0 auto;
  padding:16px 16px 40px;
}

/* --------------------
   Buttons (shared)
   -------------------- */

.btn,
button{
  appearance:none;
  cursor:pointer;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  padding:9px 16px;
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.12));
  color:#f7fafc;
  text-decoration:none;
  text-align:center;
  font-weight:600;
  font-size:14px;
  line-height:1.2;
  transition:.18s transform ease, .18s box-shadow ease, .18s background ease, .18s border-color ease;
  white-space:nowrap;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
}
.btn:hover,
button:hover{
  transform:translateY(-1px);
  box-shadow:0 8px 24px rgba(0,0,0,.38);
}
.btn:focus-visible,
button:focus-visible{
  outline:none;
  box-shadow:var(--focus);
}

/* variants (aligned with sam.css naming) */
.btn-primary{
  background:linear-gradient(180deg, var(--gold-500), var(--gold-600));
  color:#101827;
  border-color:rgba(212,175,55,.7);
  text-shadow:0 1px 0 rgba(255,255,255,.32);
}
.btn-primary:hover{
  background:linear-gradient(180deg, var(--gold-600), var(--gold-700));
}
.btn-secondary{
  background:linear-gradient(180deg, var(--navy-600), var(--navy-700));
  border-color:rgba(42,90,163,.65);
  color:#e5edff;
}
.btn-ghost{
  background:transparent;
  border-color:rgba(255,255,255,.28);
}

/* --------------------
   Header / Navigation
   -------------------- */
/* ---- Header / Navigation ---- */

.sa-header{
  position: sticky;          /* sticky / floating header */
  top: 0;
  z-index: 1000;             /* above all other content */

  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  /* darker, closer to black – like your previous version */
  background:
    linear-gradient(
      180deg,
      rgba(5, 12, 28, 0.96),
      rgba(5, 12, 28, 0.88)
    );

  border-bottom: 1px solid rgba(255,255,255,.08);
}

.sa-header-inner{
  max-width:1200px;
  margin:0 auto;
  padding:10px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}

.sa-brand{
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
}

.sa-brand-logo{
  width:42px;
  height:42px;
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 4px 18px rgba(0,0,0,.55);
  background:radial-gradient(circle at 30% 0%, rgba(255,255,255,.18), transparent 55%), #020617;
  display:flex;
  align-items:center;
  justify-content:center;
}

.sa-brand-logo img{
  max-width:80%;
  max-height:80%;
  display:block;
}

.sa-brand-text{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.sa-brand-name{
  color:#f9fbff;
  font-weight:800;
  letter-spacing:.5px;
  font-size:1rem;
  text-transform:uppercase;
}

.sa-brand-tagline{
  font-size:12px;
  color:#cbd5f5;
}

.sa-nav{
  display:flex;
  align-items:center;
  gap:16px;
}

.sa-nav-links{
  display:flex;
  align-items:center;
  gap:14px;
}

.sa-nav-link{
  font-size:14px;
  color:#dbe5ff;
  text-decoration:none;
  padding:6px 0;
  position:relative;
  white-space:nowrap;
}
.sa-nav-link::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-3px;
  width:0;
  height:2px;
  background:linear-gradient(90deg, var(--gold-500), var(--gold-700));
  transition:width .18s ease-out;
}
.sa-nav-link:hover::after{
  width:100%;
}

/* Dropdown (Portal) */
.sa-nav-dropdown{
  position:relative;
  margin-left: auto;
  display: inline-block;   /* shrinks to contents */
}

.sa-nav-dropdown-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;   /* center the “Portal” text */

  padding: 6px 14px;         /* controls padding left/right */
  gap: 6px;                  /* space between text and caret */

  width: auto;               /* only as wide as content + padding */
  white-space: nowrap;       /* don’t wrap “Portal” */

  /* keep whatever colours you already use; examples: */
  /* background-color: #0d1b2e; */
  /* border-radius: 6px; */
  /* border: 1px solid #1e2d48; */
}

/* Caret icon */
.sa-nav-dropdown-toggle svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;            /* don’t let it compress text */
  margin-left: 2px;          /* tiny breathing room from text */
}

.sa-nav-dropdown-menu {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 6px;

  padding: 6px 0;
  background: #0d1b2e;
  border-radius: 6px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.18);
  white-space: nowrap;      /* width = longest item + padding */

  display: none;            /* hidden by default */
}

.sa-nav-dropdown-menu .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 6px 14px;
  margin: 2px 8px;
  width: 100%;               /* match dropdown width = longest item */

  white-space: nowrap;
  text-align: center;

  color: #0d1117 !important;    /* deep navy/black for contrast */
  text-shadow: none;            /* remove white text glow from .btn-primary */
}

.sa-nav-dropdown-menu a{
  border-radius:var(--radius-md);
  font-size:14px;
  color:#e5edff;
  text-decoration:none;
}
.sa-nav-dropdown-menu a:hover{
  background:rgba(212,175,55,.12);
  color:var(--white);
}

/* When open: stack items vertically, don't stretch them full width */
.sa-nav-dropdown.is-open .sa-nav-dropdown-menu {
  display: flex;
  flex-direction: column;
  align-items: stretch;  /* each button only as wide as its content */
}

/* Mobile menu toggle */
.sa-nav-mobile-toggle{
  display:none;
  border:none;
  background:transparent;
  color:#e5edff;
  padding:6px;
  border-radius:999px;
  cursor:pointer;
}
.sa-nav-mobile-toggle svg{
  width:22px;
  height:22px;
}

/* --------------------
   Hero Section
   -------------------- */

.sa-hero{
  padding-top: 96px;    /* 36px hero spacing + ~60px header height */
  padding-bottom: 40px;
}

.sa-hero-grid{
  display:grid;
  grid-template-columns:minmax(0, 1.35fr) minmax(0, 1fr);
  gap:28px;
  align-items:center;
}

.sa-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:4px 10px;
  border-radius:999px;
  border:1px solid rgba(212,175,55,.45);
  background:linear-gradient(120deg, rgba(212,175,55,.18), rgba(10,20,45,.9));
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:#fdf6d3;
  margin-bottom:12px;
}

.sa-pill-dot{
  width:8px;
  height:8px;
  border-radius:999px;
  background:radial-gradient(circle at 30% 0%, #bef264, #22c55e);
  box-shadow:0 0 0 4px rgba(34,197,94,.35);
}

.sa-hero-title{
  font-size:clamp(2.2rem, 3.1vw, 3rem);
  line-height:1.15;
  margin:0 0 12px;
  color:#f9fbff;
  letter-spacing:.03em;
}

.sa-hero-title .sa-accent{
  background:linear-gradient(90deg, var(--gold-500), var(--gold-700));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.sa-hero-subtitle{
  margin:0 0 20px;
  color:#c7d5fb;
  font-size:15px;
  max-width:540px;
}

.sa-hero-meta{
  display:flex;
  flex-wrap:wrap;
  gap:12px 20px;
  align-items:center;
  margin-bottom:22px;
}

.sa-hero-kpi{
  display:flex;
  flex-direction:column;
  gap:2px;
  font-size:12px;
  color:#c6d3f5;
}
.sa-hero-kpi strong{
  font-size:15px;
  color:#fefce8;
}

.sa-hero-cta{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-bottom:18px;
}

.sa-hero-footnote{
  font-size:11px;
  color:#9ca7c8;
  max-width:460px;
}

/* Hero right panel */
.sa-hero-panel{
  border-radius:var(--radius-xl);
  padding:16px 16px 18px;
  background:
    radial-gradient(circle at 10% 0%, rgba(212,175,55,.35), transparent 55%),
    radial-gradient(circle at 110% 100%, rgba(23,196,104,.30), transparent 60%),
    linear-gradient(155deg, #020617, #020924);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 12px 40px rgba(0,0,0,.35);
}

.sa-hero-panel-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:10px;
}

.sa-hero-panel-title{
  font-size:13px;
  color:#e5edff;
}

.sa-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 8px;
  border-radius:999px;
  background:rgba(15,23,42,.9);
  border:1px solid rgba(148,163,184,.45);
  font-size:11px;
  color:#cbd5f5;
}

.sa-chip-dot{
  width:7px;
  height:7px;
  border-radius:999px;
  background:radial-gradient(circle at 30% 0%, #bbf7d0, #16a34a);
}

.sa-hero-chart{
  margin-top:8px;
  border-radius:var(--radius-lg);
  border:1px solid rgba(148,163,184,.4);
  padding:10px;
  background:radial-gradient(circle at 0 0, rgba(148,163,184,.10), transparent 55%), #020617;
}

.sa-hero-chart-bars{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:1fr;
  gap:6px;
  align-items:flex-end;
  height:130px;
  margin-bottom:6px;
}

.sa-hero-bar{
  border-radius:999px;
  background:linear-gradient(180deg, rgba(212,175,55,.95), rgba(23,37,84,1));
  position:relative;
  overflow:hidden;
}
.sa-hero-bar--green{
  background:linear-gradient(180deg, rgba(34,197,94,.95), rgba(23,37,84,1));
}
.sa-hero-bar::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(135deg, rgba(255,255,255,.15), transparent 50%);
  opacity:.6;
}

.sa-hero-chart-axis{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:10px;
  color:#9ca7c8;
}

.sa-hero-legend{
  margin-top:8px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  font-size:11px;
  color:#cbd5f5;
}

.sa-hero-legend span{
  display:inline-flex;
  align-items:center;
  gap:6px;
}

.sa-hero-legend-swatch{
  width:10px;
  height:10px;
  border-radius:999px;
  background:linear-gradient(135deg, var(--gold-500), var(--gold-700));
}
.sa-hero-legend-swatch.green{
  background:linear-gradient(135deg, #22c55e, #16a34a);
}

/* --------------------
   Sections / Cards
   -------------------- */

.sa-section{
  padding:26px 0 8px;
}

.sa-section-header{
  display:flex;
  flex-direction:column;
  gap:4px;
  margin-bottom:18px;
  max-width:640px;
}

.sa-section-kicker{
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:#eab308;
}

.sa-section-title{
  margin:0;
  font-size:1.45rem;
  color:#f9fbff;
}

.sa-section-subtitle{
  margin:0;
  color:#c3cff3;
  font-size:14px;
}

.sa-grid-3{
  display:grid;
  gap:16px;
  grid-template-columns:repeat(3, minmax(0, 1fr));
}

.sa-card{
  border-radius:var(--radius-xl);
  padding:16px 16px 18px;
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,.12));
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 10px 28px rgba(0,0,0,.28);
  display:flex;
  flex-direction:column;
  height:100%;
}

.sa-card-icon{
  width:30px;
  height:30px;
  border-radius:10px;
  background:linear-gradient(135deg, rgba(212,175,55,.35), rgba(15,23,42,1));
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fefce8;
  margin-bottom:10px;
  flex-shrink:0;
}

.sa-card-title{
  margin:0 0 6px;
  font-size:15px;
  color:#f9fbff;
}

.sa-card-body{
  margin:0 0 10px;
  font-size:13px;
  color:#d4defc;
  flex:1 1 auto;
}

.sa-card-foot{
  font-size:12px;
  color:#9ca7c8;
}

.sa-grid-2{
  display:grid;
  gap:18px;
  grid-template-columns:minmax(0, 1.2fr) minmax(0, 1fr);
  align-items:start;
}

.sa-list{
  list-style:none;
  padding:0;
  margin:12px 0 0;
  display:flex;
  flex-direction:column;
  gap:8px;
  font-size:13px;
  color:#d4defc;
}

.sa-list li{
  display:flex;
  gap:8px;
  align-items:flex-start;
}

.sa-list-bullet{
  margin-top:4px;
  width:8px;
  height:8px;
  border-radius:999px;
  background:radial-gradient(circle at 30% 0%, #bbf7d0, #16a34a);
  flex-shrink:0;
}

/* Stats row */
.sa-stats-row{
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  margin-top:12px;
}

.sa-stat{
  padding:10px 12px;
  border-radius:var(--radius-lg);
  border:1px solid rgba(148,163,184,.55);
  background:radial-gradient(circle at 0 0, rgba(148,163,184,.16), transparent 60%);
  min-width:150px;
}

.sa-stat-label{
  font-size:11px;
  color:#cbd5f5;
  margin-bottom:4px;
}

.sa-stat-value{
  font-size:16px;
  color:#fefce8;
  font-weight:700;
}

/* Call-to-action “New Investor” */
.sa-cta{
  border-radius:var(--radius-xl);
  padding:18px 18px 20px;
  border:1px solid rgba(212,175,55,.6);
  background:
    radial-gradient(circle at 0 0, rgba(212,175,55,.25), transparent 55%),
    radial-gradient(circle at 100% 100%, rgba(56,189,248,.18), transparent 60%),
    linear-gradient(135deg, #020617, #020b29);
  box-shadow:0 12px 40px rgba(0,0,0,.35);
  display:grid;
  gap:18px;
  grid-template-columns:minmax(0, 1.4fr) minmax(0, 1fr);
  align-items:center;
}

.sa-cta-title{
  margin:0 0 8px;
  color:#fefce8;
  font-size:1.25rem;
}

.sa-cta-body{
  margin:0 0 10px;
  font-size:14px;
  color:#e5edff;
}

.sa-cta-small{
  font-size:12px;
  color:#e5e7eb;
}

.sa-cta-form{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.sa-input{
  width:100%;
  padding:9px 11px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.32);
  background:rgba(15,23,42,.9);
  color:#f9fbff;
  font-size:13px;
}
.sa-input::placeholder{
  color:#9ca7c8;
}
.sa-input:focus{
  outline:none;
  border-color:rgba(212,175,55,.8);
  box-shadow:var(--ring);
}

/* Footer */
.sa-footer{
  border-top:1px solid rgba(148,163,184,.35);
  padding:14px 16px 22px;
  font-size:11px;
  color:#9ca7c8;
  background:rgba(6,12,30,.9);
}

.sa-footer-inner{
  max-width:1200px;
  margin:0 auto;
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  justify-content:space-between;
  align-items:center;
}

.sa-footer-links{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.sa-footer a{
  color:#eab308;
  text-decoration:none;
}
.sa-footer a:hover{
  text-decoration:underline;
}

/* --------------------
   Responsive
   -------------------- */

@media (max-width: 900px){
  .sa-hero-grid{
    grid-template-columns:1fr;
  }
  .sa-hero-panel{
    max-width:460px;
    margin:0 auto;
  }
}

@media (max-width: 800px){
  .sa-grid-3{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
  .sa-cta{
    grid-template-columns:1fr;
  }
}

@media (max-width: 640px){
  .sa-header-inner{
    flex-wrap:wrap;
  }

  .sa-nav-links{
    position:absolute;
    inset:56px 12px auto 12px;
    flex-direction:column;
    align-items:flex-end;   /* was flex-start – move items to the right */
    gap:8px;
    padding:10px 12px;
    border-radius:var(--radius-lg);
    background:linear-gradient(180deg, rgba(15,23,42,.98), rgba(15,23,42,.96));
    border:1px solid rgba(148,163,184,.55);
    box-shadow:0 10px 28px rgba(0,0,0,.28);
    display:none;
  }

  .sa-nav-links.is-open{
    display:flex;
  }

  /* Right-align text and the Portal dropdown in mobile menu */
  .sa-nav-link,
  .sa-nav-dropdown{
    align-self:flex-end;
    text-align:right;
  }
  
  /* Ensure dropdown sits correctly inside mobile menu */
  .sa-nav-dropdown-menu {
    left: auto;
    right: 0;                             /* anchor to the right edge */
  }

  /* Make dropdown button text dark */
  .sa-nav-dropdown-menu .btn {
    color: #0d1117 !important;    /* deep navy/black for contrast */
    text-shadow: none;            /* remove white text glow from .btn-primary */
  }

  .sa-nav-mobile-toggle{
    display:inline-flex;
  }

  .sa-nav{
    margin-left:auto;
  }

  .sa-hero{
    padding-top: 96px;   /* keep enough room for taller mobile header */
  }

  .sa-hero-title{
    font-size:1.85rem;
  }

  .sa-hero-subtitle{
    font-size:14px;
  }

  .sa-grid-3{
    grid-template-columns:1fr;
  }

  .sa-grid-2{
    grid-template-columns:1fr;
  }

  .sa-cta{
    padding:16px;
  }

}

@media (max-width: 420px){
  .sa-brand-name{
    font-size:.9rem;
  }
  .btn,
  button{
    font-size:13px;
    padding:8px 13px;
  }
  .sa-hero-chart{
    padding:8px;
  }
  .sa-hero-chart-bars{
    height:110px;
  }
}

/* ============================
   Hero visual row (image + SVG)
   ============================ */

.sa-hero-visual-row {
  margin-top:4px;
  margin-bottom:4px;
  padding-top:0;
  padding-bottom:0;
}

.sa-hero-visual-grid {
  display:grid;
  gap:24px;
  align-items:stretch;
}

/* Two columns on medium+ screens, stack on small screens */
@media (min-width: 900px) {
  .sa-hero-visual-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Shared panel styling – match hero panel look */
.sa-hero-image-panel {
  width:100%;
  max-width:480px;
  margin:0 auto;

  background:linear-gradient(
    180deg,
    rgba(255,255,255,0.06),
    rgba(0,0,0,0.18)
  );
  border:1px solid rgba(255,255,255,0.10);
  border-radius:16px;
  padding:20px 20px 18px;
  box-shadow:var(--shadow-1);
  backdrop-filter:blur(6px);

  display:flex;
  align-items:center;
  justify-content:center;
}

/* Slightly denser padding on very small screens */
@media (max-width: 640px) {
  .sa-hero-image-panel {
    max-width:100%;
    padding:14px;
  }
}

/* Image inside panel */
.sa-hero-image {
  width:100%;
  height:auto;
  border-radius:12px;
  object-fit:contain;
  box-shadow:0 8px 20px rgba(0,0,0,0.35);
}

/* Optional: subtle distinction for diagram, if you want */
.sa-hero-diagram-panel {
  border-style:dashed;
  border-color:rgba(212,175,55,0.55);
}