:root{
  --bg: #0e1020;
  --bg-2: #12142a;
  --text: #12131a;
  --muted: #5c627a;
  --white: #fff;
  --primary: #5a4ded; 
  --primary-600:#4a3ed0;
  --primary-700:#3f35b4;
  --light: #eef0ff;
  --ring: 0 10px 30px rgba(18,20,42,.2);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: "Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,HelveticaNeue,Helvetica,sans-serif;
  color: var(--text);
  background:
    radial-gradient(1200px 600px at 70% 10%, rgba(90,77,237,.10), transparent 60%),
    radial-gradient(1000px 500px at 90% 90%, rgba(90,77,237,.08), transparent 60%),
    #f8f9ff;
}

/* Utilities */
.container{width:min(1120px, 92%); margin-inline:auto; max-width: none;}
.section{padding:72px 0}
.section.alt{background:#f5f6ff}
h1,h2{margin:0 0 .5rem}
p{margin:.5rem 0 1rem}

/* Nav */
.nav{
  position: sticky; top:0; z-index:50;
  backdrop-filter: blur(8px);
  background: linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.75));
  border-bottom: 1px solid rgba(18,20,42,.06);
}
.nav__inner{display:flex; align-items:center; gap:16px; padding-left: 2rem;
    padding-right: 2rem;}
.nav__brand{display:flex; align-items:center; gap:10px; text-decoration:none}
.brand-icon{font-size:20px}
.brand-text{font-weight:800; font-size:20px; color:#12131a}
.nav__menu{display:flex; gap:22px; margin-right:auto}
.nav__link{color:#2a2d3a; text-decoration:none; font-weight:500}
.nav__link:hover{color:var(--primary)}
.nav__actions{display:flex; gap:10px; margin-left:16px}
.nav__toggle{display:none; background:none; border:0; padding:6px; margin-left:auto}
.nav__toggle-bar{display:block; width:22px; height:2px; background:#1c1f2b; margin:4px 0}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 16px; border-radius:10px; font-weight:600; text-decoration:none;
  border:1px solid transparent; transition:.18s ease-in-out; white-space:nowrap;
  cursor: pointer;
}
.btn--primary{
  color:#fff; background:var(--primary); box-shadow: var(--ring);
}
.btn--primary:hover{background:var(--primary-600)}
.btn--ghost{
  color:#111; background:transparent; border-color:rgba(18,20,42,.12)
}
.btn--ghost:hover{border-color:rgba(18,20,42,.3)}
.btn--light{
  background:#fff; color:#111; border-color:rgba(18,20,42,.12)
}
.btn--xl{padding:14px 20px; border-radius:12px}
.btn .play{display:inline-block; margin-right:8px; transform: translateY(1px)}

/* Hero */
.hero{padding:64px 0 92px}
.hero__grid{display:grid; grid-template-columns: 1.2fr 1fr; align-items:center; gap:40px}
.hero__title{font-size: clamp(36px, 6vw, 64px); line-height:1.05; letter-spacing:-.02em}
.brand-accent{color:var(--primary)}
.hero__subtitle{font-size:18px; color:#3a3e56; margin-top:10px}
.hero__ctas{display:flex; gap:12px; margin-top:18px; flex-wrap:wrap}
.hero__bullets{display:flex; gap:26px; padding:0; margin:18px 0 0; list-style:none; color:#3f4562}
.hero__bullets .dot{
  width:8px; height:8px; border-radius:999px; background:#19c37d; display:inline-block; margin-right:8px
}

.hero__visual{position:relative}
.hero__image{
  border-radius:12px; overflow:hidden; box-shadow: 0 20px 50px rgba(18,20,42,.18); margin: 0;
}
.hero__image img{display:block; width:100%; height:auto}
.blob{
  position:absolute; width:120px; height:120px; border-radius:2px; background:rgba(90,77,237,.1);
  filter: blur(0px);
}
.blob--tl{top:-22px; left:-22px}
.blob--br{right:-22px; bottom:-22px}

/* Footer */
.footer{padding:28px 0; border-top:1px solid rgba(18,20,42,.06); background:#fff}
.footer__inner{display:flex; align-items:center; justify-content:space-between}
.footer__nav{display:flex; gap:18px}
.footer__nav a{color:#3c4162; text-decoration:none}
.footer__nav a:hover{color:#000}

/* Responsive */
@media (max-width: 960px){
  .hero__grid{grid-template-columns:1fr; gap:65px}
  .hero{padding:36px 0 64px}
  .nav__menu{display:none}
  .nav__toggle{display:inline-block}
  .nav__actions{display:none}
  .nav--open #mainNav{
    display:flex; position:absolute; top:60px; left:0; right:0;
    background:#fff; border-bottom:1px solid rgba(18,20,42,.06);
    padding:12px 4%; gap:16px; flex-direction:column
  }
  .nav--open .nav__actions{display:flex; position:absolute; right:4%; top:60px}
}

/* Smooth anchor scroll */
html{scroll-behavior:smooth}

/* ===== Financial Suite Section (landing page) ===== */
/* Container */
.lp-finance {
  padding: 56px 16px 72px;
  background: #ffffff; /* keep landing hero white */
}

.lp-finance__container {
  width:min(1120px, 92%);
  margin: 0 auto;
  text-align: center;
}

/* Heading & subtitle */
.lp-finance__title {
  font-size: clamp(28px, 3.6vw, 44px);
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: 0.2px;
  color: #0b1220; /* near-black */
  margin: 0 0 12px;
}

.lp-finance__title .accent {
  color: #0b5ed7; /* brand blue accent */
}

.lp-finance__subtitle {
  max-width: 720px;
  margin: 0 auto 32px;
  font-size: clamp(15px, 1.6vw, 18px);
  color: #4b5563; /* gray-600 */
}

/* Grid */
.lp-finance__grid {
  display: grid;
  gap: 22px;
  grid-template-columns: 1fr;
  margin-top: 20px;
}

@media (min-width: 680px) {
  .lp-finance__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .lp-finance__grid { grid-template-columns: repeat(4, 1fr); }
}

/* Card */
.lp-card {
  text-align: left;
  padding: 22px;
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: 14px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05);
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
  min-height: 190px;
}

.lp-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
  border-color: rgba(11, 94, 215, 0.25);
}

/* Icon */
.lp-card__icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: inline-grid;
  place-items: center;
  margin-bottom: 14px;
  background: #0b5ed7;          /* blue tile */
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.2);
}

.lp-card__icon .material-symbols-outlined,
.lp-card__icon svg {
  width: 24px;
  height: 24px;
  color: white;
  font-size: 24px;
  fill: #e9f2ff;                /* light ink on blue */
  stroke: #e9f2ff;
  stroke-width: 1.2;
}

/* Titles & copy */
.lp-card__title {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 700;
  color: #0b1220;
}

.lp-card__text {
  margin: 0;
  color: #5b6472;
  line-height: 1.55;
  font-size: 15px;
}

/* Prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .lp-card { transition: none; }
  .lp-card:hover { transform: none; }
}

.features {
  text-align: center;
  margin: 2rem auto;
  max-width: 800px;
  padding: 1rem;
}

.features h2 {
  font-size: 1.875rem; /* ~text-3xl */
  font-weight: bold;
  color: var(--foreground, #111);
  line-height: 1.2;
}

@media (min-width: 1024px) {
  .features h2 {
    font-size: 2.25rem; /* ~lg:text-4xl */
  }
}

.features h2 .highlight {
  background: linear-gradient(90deg, #4f46e5, #0ea5e9); /* gradient */
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.features p {
  font-size: 1.125rem; /* ~text-lg */
  color: var(--muted-foreground, #6b7280);
  max-width: 42rem; /* ~max-w-2xl */
  margin: 1rem auto 0;
  line-height: 1.6;
}

/* Layout: video + kapitel i två kolumner */
.video-with-chapters {
  display: grid;
  grid-template-columns: minmax(560px, 1fr) 320px; /* video | kapitel */
  gap: 20px;
  align-items: start;
  max-width: min(1200px, 95vw);
}

/* Video behåller 16:9 oavsett bredd */
.video-container {
  width: 100%;
  aspect-ratio: 16 / 9;     /* tvingar 16:9 */
  position: relative;
}

.video-container iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Kapitellistans kolumn */
.chapters {
  max-width: 320px;
  font-size: 1.65rem;
}

.chapters h3 { margin: 0 0 10px; }
.chapters ul { list-style: none; padding: 0; margin: 0; }
.chapters li { margin: 8px 0; }
.chapters button { background: none; border: none; cursor: pointer; text-align: left; padding: 4px 0; }
.chapters button:hover { text-decoration: underline; }

/* Modalbredd så videon får plats */
#demo-modal .modal__dialog {
  width: auto;
  max-width: 1200px;            /* rymmer grid: 560 + 320 + gap */
}
#demo-modal .modal__body { padding: 16px; }

/* Visa/dölj modal */
.modal.hide { display: none; }
.modal:not(.hide) { display: block; }

/* Mobil: stacka under varandra */
@media (max-width: 900px) {
  .video-with-chapters {
    grid-template-columns: 1fr; /* video överst, kapitel under */
  }
  .chapters { max-width: none; }
}