/* ============================================================================
   LumenSpark - landing/base.css
   Reset, tipografska skala, gumbi, dijeljeni primitivi. Prefiks .lsw-
   ============================================================================ */

*,*::before,*::after{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--lsw-nav-h) + 18px);
}
body.lsw-body{
  margin:0;
  background:var(--lsw-bg);
  color:var(--lsw-text);
  font-family:var(--lsw-font);
  font-size:16px;
  line-height:1.5;
  font-feature-settings:'cv11','ss01';
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
body.lsw-no-scroll{overflow:hidden}
img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
h1,h2,h3,h4,p,ul,ol,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}

/* --- Fokus ---------------------------------------------------------------- */
:where(a,button,[tabindex],summary,input,select):focus-visible{
  outline:2px solid var(--lsw-accent);
  outline-offset:3px;
  border-radius:4px;
}
.lsw-dark :where(a,button,[tabindex]):focus-visible{
  outline-color:var(--lsw-accent-light);
}

/* --- Skip link ----------------------------------------------------------- */
.lsw-skip{
  position:fixed;left:14px;top:-70px;z-index:400;
  background:var(--lsw-brand);color:var(--lsw-on-dark);
  padding:12px 16px;border-radius:var(--lsw-r-sm);
  font-size:14px;font-weight:600;
  transition:top var(--motion-fast) var(--motion-ease);
}
.lsw-skip:focus{top:14px}

.lsw-sr{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* --- Layout -------------------------------------------------------------- */
.lsw-wrap{
  width:100%;max-width:var(--lsw-maxw);
  margin-inline:auto;padding-inline:var(--lsw-gutter);
}

.lsw-section{padding:72px 0;position:relative}
.lsw-section-tight{padding:48px 0}

/* Ritam pozadina */
.lsw-paper{background:var(--lsw-bg)}
.lsw-paper-alt{background:var(--lsw-surface-soft)}
.lsw-dark{
  background:var(--lsw-brand);
  color:var(--lsw-on-dark);
  position:relative;
  isolation:isolate;
}
/* Kad tamna sekcija slijedi tamnu, tvrdi stepenasti rub izmedu #181715 i
   #0f0e0c cita se kao vodoravna crta preko cijele sirine. Zato druga sekcija
   POCINJE bojom prve i tek onda tone u svoju: sav je prijelaz gradijent. */
.lsw-dark-deep{
  background:linear-gradient(180deg,
    var(--lsw-brand) 0,
    var(--lsw-brand-dark) 340px);
}

/* Romb-lattice tekstura (identicna sidebaru aplikacije).
   Uzorak se racuna od gornjeg ruba SVAKE sekcije, pa se na spoju dviju tamnih
   sekcija faza vidljivo prekida. Maska ga gasi uz gornji i donji rub, pa
   prekid nema gdje biti vidljiv. */
.lsw-lattice::before{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:
    repeating-linear-gradient( 60deg,var(--lsw-lattice) 0,var(--lsw-lattice) 1px,transparent 1px,transparent var(--lsw-lattice-step)),
    repeating-linear-gradient(-60deg,var(--lsw-lattice) 0,var(--lsw-lattice) 1px,transparent 1px,transparent var(--lsw-lattice-step));
  -webkit-mask-image:linear-gradient(180deg,
    rgba(0,0,0,0) 0,rgba(0,0,0,1) 120px,
    rgba(0,0,0,1) calc(100% - 140px),rgba(0,0,0,0) 100%);
  mask-image:linear-gradient(180deg,
    rgba(0,0,0,0) 0,rgba(0,0,0,1) 120px,
    rgba(0,0,0,1) calc(100% - 140px),rgba(0,0,0,0) 100%);
}

/* Topli bljesak na samom spoju: prazan pojas izmedu poglavlja postaje
   namjeran prijelaz, a ne rupa. Prelazi preko ruba u prethodnu sekciju. */
.lsw-dark-deep::after{
  content:'';position:absolute;z-index:-1;pointer-events:none;
  top:-180px;left:50%;transform:translateX(-50%);
  width:min(1180px,92%);height:360px;
  background:radial-gradient(ellipse 60% 50% at 50% 50%,
    rgba(204,120,92,.11),rgba(204,120,92,.04) 46%,transparent 72%);
}

/* Dvije tamne sekcije jedna do druge ne trebaju dvostruki zracni pojas */
.lsw-dark:has(+ .lsw-dark){padding-bottom:44px}
.lsw-dark + .lsw-dark{padding-top:48px}

/* Hairline razdjelnik izmedju svijetlih sekcija */
.lsw-rule{border-top:1px solid var(--lsw-border)}

/* --- Tipografija --------------------------------------------------------- */
.lsw-eyebrow{
  font-family:var(--lsw-mono);
  font-size:10px;font-weight:500;
  letter-spacing:.15em;text-transform:uppercase;
  color:var(--lsw-text-4);
  display:inline-flex;align-items:center;gap:8px;
}
.lsw-eyebrow::before{
  content:'';width:16px;height:1px;background:var(--lsw-accent);flex:none;
}
.lsw-dark .lsw-eyebrow{color:var(--lsw-on-dark-3)}

.lsw-h2{
  font-family:var(--lsw-font);
  font-weight:680;
  font-size:clamp(1.85rem,3.1vw,2.75rem);
  line-height:1.06;
  letter-spacing:-.035em;
  max-width:23ch;
}
.lsw-h3{
  font-family:var(--lsw-font);
  font-weight:660;
  font-size:clamp(1.22rem,1.7vw,1.5rem);
  line-height:1.18;
  letter-spacing:-.025em;
}
.lsw-h4{
  font-size:16px;font-weight:650;letter-spacing:-.014em;line-height:1.3;
}
.lsw-lead{
  font-size:clamp(.98rem,1.1vw,1.09rem);
  line-height:1.52;
  color:var(--lsw-text-2);
  max-width:60ch;
}
.lsw-dark .lsw-lead{color:var(--lsw-on-dark-2)}
.lsw-body-text{font-size:15px;line-height:1.54;color:var(--lsw-text-3)}
.lsw-dark .lsw-body-text{color:var(--lsw-on-dark-3)}
.lsw-mono{font-family:var(--lsw-mono);font-size:12px;letter-spacing:.01em}

/* Zaglavlje sekcije */
.lsw-shead{
  display:flex;flex-direction:column;gap:12px;
  max-width:780px;margin-bottom:36px;
}
.lsw-shead-split{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.85fr);
  gap:40px;align-items:end;max-width:none;margin-bottom:36px;
}

/* --- Gumbi --------------------------------------------------------------- */
.lsw-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:44px;padding:12px 20px;
  border:1px solid transparent;border-radius:var(--lsw-r-md);
  font-family:var(--lsw-font);font-size:15px;font-weight:600;
  letter-spacing:-.006em;cursor:pointer;
  transition:background var(--motion-fast),border-color var(--motion-fast),
             color var(--motion-fast),transform var(--motion-fast) var(--motion-ease),
             box-shadow var(--motion-fast);
}
.lsw-btn:hover{transform:translateY(-1px)}
.lsw-btn:active{transform:translateY(0)}
.lsw-btn svg{width:16px;height:16px;flex:none}

.lsw-btn-primary{
  background:var(--lsw-accent);color:var(--lsw-on-accent);
  box-shadow:0 1px 0 rgba(255,255,255,.14) inset,0 8px 22px -14px rgba(204,120,92,.9);
}
.lsw-btn-primary:hover{
  background:var(--lsw-accent-deep);
  box-shadow:0 1px 0 rgba(255,255,255,.14) inset,0 12px 28px -14px rgba(204,120,92,.95);
}

.lsw-btn-outline{
  background:transparent;color:var(--lsw-text);
  border-color:var(--lsw-border-strong);
}
.lsw-btn-outline:hover{background:var(--lsw-surface);border-color:var(--lsw-text-4)}

.lsw-btn-ghost-dark{
  background:rgba(245,240,234,.06);color:var(--lsw-on-dark);
  border-color:var(--lsw-on-dark-border);
}
.lsw-btn-ghost-dark:hover{background:rgba(245,240,234,.12);border-color:rgba(245,240,234,.3)}

.lsw-btn-dark{background:var(--lsw-brand);color:var(--lsw-on-dark)}
.lsw-btn-dark:hover{background:var(--lsw-brand-mid)}

.lsw-btn-sm{min-height:38px;padding:8px 16px;font-size:14px;border-radius:var(--lsw-r-sm)}
.lsw-btn-lg{min-height:50px;padding:12px 24px;font-size:16px}

.lsw-link{
  display:inline-flex;align-items:center;gap:8px;
  font-size:14px;font-weight:600;color:var(--lsw-accent);
  border-bottom:1px solid transparent;padding-bottom:1px;
}
.lsw-link:hover{border-bottom-color:var(--lsw-accent-border)}
.lsw-link svg{width:14px;height:14px;transition:transform var(--motion-fast) var(--motion-ease)}
.lsw-link:hover svg{transform:translateX(3px)}
.lsw-dark .lsw-link{color:var(--lsw-accent-light)}

/* --- Znacke / status ----------------------------------------------------- */
.lsw-badge{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--lsw-mono);font-size:10px;font-weight:500;
  letter-spacing:.05em;text-transform:uppercase;
  padding:4px 8px;border-radius:6px;
  border:1px solid var(--lsw-border);background:var(--lsw-surface-soft);
  color:var(--lsw-text-3);white-space:nowrap;
}
.lsw-badge-dot{width:6px;height:6px;border-radius:50%;flex:none;background:currentColor}
.lsw-badge-green{background:var(--lsw-green-soft);border-color:var(--lsw-green-b);color:var(--lsw-green-ink)}
.lsw-badge-red{background:var(--lsw-red-soft);border-color:var(--lsw-red-b);color:var(--lsw-red)}
.lsw-badge-orange{background:var(--lsw-orange-soft);border-color:var(--lsw-orange-b);color:var(--lsw-orange-ink)}
.lsw-badge-teal{background:var(--lsw-teal-soft);border-color:var(--lsw-teal-b);color:var(--lsw-teal-ink)}
.lsw-badge-accent{background:var(--lsw-accent-soft);border-color:var(--lsw-accent-border);color:var(--lsw-accent-deep)}
.lsw-badge-dark{background:rgba(245,240,234,.07);border-color:var(--lsw-on-dark-border);color:var(--lsw-on-dark-2)}

/* ==========================================================================
   UTILITIES - mala, imenovana zamjena za inline stilove (brief: avoid inline CSS)
   Namjerno uzak set: samo ono sto se ponavlja u marketinskim vizualima.
   Geometrija vodena podacima (--w / --x / --h / --lsw-ring-v / --lsw-node)
   ostaje inline jer je to vrijednost, ne stil.
   ========================================================================== */
.lsw-push{margin-left:auto}
.lsw-center{text-align:center}
.lsw-mt{margin-top:16px}
.lsw-mt-lg{margin-top:16px}
.lsw-mb{margin-bottom:16px}
.lsw-muted{color:var(--lsw-text-4)}
.lsw-w-52{max-width:52ch}
.lsw-w-62{max-width:62ch}

/* Odvojena podnozna skupina redova unutar okvira */
.lsw-sep-top{
  margin-top:16px;padding-top:12px;border-top:1px solid var(--lsw-border);
}

/* Cvorovi operativnog modela - boja kategorije kao lokalni token */
.lsw-n-sales{--lsw-node:var(--lsw-cat-sales)}
.lsw-n-projects{--lsw-node:var(--lsw-cat-projects)}
.lsw-n-people{--lsw-node:var(--lsw-cat-people)}
.lsw-n-work{--lsw-node:var(--lsw-cat-work)}
.lsw-n-finance{--lsw-node:var(--lsw-cat-finance)}
.lsw-n-analytics{--lsw-node:var(--lsw-cat-analytics)}
.lsw-n-audit{--lsw-node:var(--lsw-cat-audit)}

/* Legenda kalendara - uzorci */
.lsw-sw-alloc{background:var(--lsw-heat-1)}
.lsw-sw-full{background:var(--lsw-accent)}
.lsw-sw-off{background:var(--lsw-teal-soft);box-shadow:inset 0 0 0 1px var(--lsw-teal-b)}
.lsw-sw-none{background:transparent;box-shadow:inset 0 0 0 1px var(--lsw-border)}

/* Ponovljivi ritam unutar vizuala */
.lsw-row .lsw-meter{margin-top:8px}
.lsw-frame-body .lsw-eyebrow{margin-bottom:12px}
.lsw-eyebrow .lsw-spark-pulse{margin-right:2px}
.lsw-acc-body .lsw-h4{margin:16px 0 8px}
.lsw-kpis-boxed{
  border:1px solid var(--lsw-border);border-radius:var(--lsw-r-md);
  overflow:hidden;margin-bottom:16px;
}
.lsw-bars-sm{height:78px}