/* =============================================================
   SamsonIT Demos - shared design system (theme-variable driven)
   Each demo page overrides the palette variables in :root.
   ============================================================= */

:root{
  /* Palette (overridden per demo) */
  --bg:#FFFFFF; --surface:#F7F6FB; --ink:#16121F; --ink-soft:#43394F; --muted:#7C7488;
  --brand:#4F46E5; --brand-2:#7C3AED; --accent:#F59E0B;
  --line:rgba(20,16,25,.10); --line-2:rgba(20,16,25,.05);
  --grad:linear-gradient(120deg,var(--brand),var(--brand-2));
  --shadow-sm:0 4px 16px rgba(20,16,25,.07);
  --shadow-md:0 14px 44px rgba(20,16,25,.12);
  --shadow-brand:0 16px 40px color-mix(in srgb, var(--brand) 34%, transparent);
  /* Fonts (page sets these + loads the webfonts) */
  --f-display:'Fraunces',Georgia,serif;
  --f-head:'Space Grotesk',system-ui,sans-serif;
  --f-body:'Inter',system-ui,sans-serif;
  --maxw:1180px; --ease:cubic-bezier(.16,1,.3,1);
  --r-sm:12px; --r-md:18px; --r-lg:26px; --r-xl:38px;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{ font-family:var(--f-body); color:var(--ink); background:var(--bg); line-height:1.6; overflow-x:hidden; }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; }
:focus-visible{ outline:3px solid var(--brand-2); outline-offset:3px; border-radius:6px; }

.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 24px; }
.section{ padding:92px 0; position:relative; }

h1,h2,h3,h4{ font-family:var(--f-head); line-height:1.06; letter-spacing:-.02em; font-weight:700; text-wrap:balance; }
.display{ font-family:var(--f-display); font-weight:900; line-height:.98; letter-spacing:-.02em; }
.eyebrow{ font-family:var(--f-head); text-transform:uppercase; letter-spacing:.2em; font-size:12px; font-weight:600; color:var(--brand); display:inline-flex; align-items:center; gap:8px; }
.eyebrow::before{ content:''; width:24px; height:2px; background:var(--brand); }
.grad-text{ background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.lead{ font-size:clamp(16px,1.9vw,20px); color:var(--ink-soft); max-width:60ch; }
.muted{ color:var(--muted); }

.btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:14px 26px; border-radius:999px; font-family:var(--f-head); font-weight:600; font-size:15px; transition:transform .3s var(--ease), box-shadow .3s var(--ease), background .3s; white-space:nowrap; }
.btn-primary{ background:var(--grad); color:#fff; box-shadow:var(--shadow-brand); }
.btn-primary:hover{ transform:translateY(-3px); }
.btn-dark{ background:var(--ink); color:var(--bg); }
.btn-dark:hover{ transform:translateY(-3px); }
.btn-ghost{ background:color-mix(in srgb, var(--ink) 5%, transparent); color:var(--ink); border:1.5px solid var(--line); }
.btn-ghost:hover{ transform:translateY(-3px); background:color-mix(in srgb, var(--ink) 9%, transparent); }
.btn-lg{ padding:17px 34px; font-size:16px; }
.btn-sm{ padding:9px 16px; font-size:13px; }

.pill{ display:inline-flex; align-items:center; gap:8px; padding:8px 15px; border-radius:999px; font-size:13px; font-weight:600; font-family:var(--f-head); background:var(--bg); border:1.5px solid var(--line); }
.tag{ font-size:12px; font-weight:600; padding:4px 11px; border-radius:999px; font-family:var(--f-head); background:color-mix(in srgb, var(--brand) 12%, transparent); color:var(--brand); }

.card{ background:var(--bg); border-radius:var(--r-lg); border:1px solid var(--line-2); box-shadow:var(--shadow-sm); transition:transform .4s var(--ease), box-shadow .4s var(--ease); }
.card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); }

.reveal{ opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
.reveal[data-d="1"]{ transition-delay:.08s;} .reveal[data-d="2"]{ transition-delay:.16s;}
.reveal[data-d="3"]{ transition-delay:.24s;} .reveal[data-d="4"]{ transition-delay:.32s;}

.blob{ position:absolute; border-radius:50%; filter:blur(70px); opacity:.5; z-index:0; pointer-events:none; }
.grid{ display:grid; gap:22px; }
.center{ text-align:center; } .mx-auto{ margin-left:auto; margin-right:auto; }

/* Nav */
.nav{ position:fixed; top:0; left:0; right:0; z-index:100; transition:background .4s, box-shadow .4s, padding .4s; padding:18px 0; }
.nav.scrolled{ background:color-mix(in srgb, var(--bg) 85%, transparent); backdrop-filter:blur(16px); box-shadow:0 1px 0 var(--line); padding:12px 0; }
.nav-inner{ display:flex; align-items:center; justify-content:space-between; }
.brand{ display:flex; align-items:center; gap:12px; font-family:var(--f-head); font-weight:700; font-size:18px; }
.brand-mark{ width:40px; height:40px; border-radius:12px; background:var(--grad); display:grid; place-items:center; color:#fff; font-family:var(--f-display); font-weight:900; font-size:19px; box-shadow:var(--shadow-brand); }
.nav-links{ display:flex; gap:30px; align-items:center; }
.nav-links a{ font-family:var(--f-head); font-weight:500; font-size:15px; color:var(--ink-soft); transition:color .2s; }
.nav-links a:hover{ color:var(--brand); }
.nav-cta{ display:flex; gap:12px; align-items:center; }

/* Section header */
.sec-head{ max-width:640px; }
.sec-head h2{ font-size:clamp(30px,4.2vw,50px); margin:14px 0 12px; }
.sec-head.center{ margin-inline:auto; text-align:center; }

/* Dark section */
.section-dark{ background:var(--ink); color:var(--bg); }
.section-dark .lead{ color:color-mix(in srgb, var(--bg) 72%, transparent); }
.section-dark h2{ color:var(--bg); }

/* Consolidation band (shared across demos) */
.consol{ position:relative; overflow:hidden; }
.consol-grid{ display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; position:relative; z-index:2; }
.stack-before{ display:flex; flex-wrap:wrap; gap:10px; }
.chip-old{ padding:9px 14px; border-radius:12px; background:color-mix(in srgb, var(--bg) 8%, transparent); border:1px solid color-mix(in srgb, var(--bg) 16%, transparent); font-size:13px; font-family:var(--f-head); font-weight:600; color:color-mix(in srgb, var(--bg) 80%, transparent); position:relative; }
.chip-old s{ text-decoration-color:var(--accent); text-decoration-thickness:2px; }
.one-platform{ background:color-mix(in srgb, var(--bg) 6%, transparent); border:1px solid color-mix(in srgb, var(--bg) 14%, transparent); border-radius:20px; padding:26px; }
.op-row{ display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid color-mix(in srgb, var(--bg) 12%, transparent); font-size:14px; }
.op-row:last-child{ border-bottom:none; }
.op-ic{ width:34px; height:34px; border-radius:9px; background:var(--grad); display:grid; place-items:center; font-size:16px; flex:none; }

/* Feature bento */
.bento{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.bento .b-lg{ grid-column:span 2; }
.feature{ padding:32px; }
.feature .f-icon{ width:54px; height:54px; border-radius:15px; display:grid; place-items:center; font-size:25px; margin-bottom:18px; background:color-mix(in srgb, var(--brand) 12%, transparent); }
.feature h3{ font-size:21px; margin-bottom:9px; }
.feature p{ color:var(--ink-soft); font-size:15px; }
.feature.brandfill{ background:var(--grad); color:#fff; border:none; }
.feature.brandfill h3{ color:#fff; } .feature.brandfill p{ color:rgba(255,255,255,.9); }
.feature.brandfill .f-icon{ background:rgba(255,255,255,.18); }
.feature.ink{ background:var(--ink); color:var(--bg); border:none; }
.feature.ink h3{ color:var(--bg); } .feature.ink p{ color:color-mix(in srgb,var(--bg) 72%,transparent); }
.feature.ink .f-icon{ background:rgba(255,255,255,.14); }

/* Footer */
.footer{ background:var(--ink); color:color-mix(in srgb, var(--bg) 70%, transparent); padding:64px 0 30px; }
.foot-grid{ display:grid; grid-template-columns:2fr 1fr 1fr; gap:40px; margin-bottom:40px; }
.footer h4{ color:var(--bg); font-size:15px; margin-bottom:14px; }
.footer a{ display:block; padding:5px 0; font-size:14px; color:color-mix(in srgb, var(--bg) 70%, transparent); transition:color .2s; }
.footer a:hover{ color:var(--brand); }
.foot-bottom{ border-top:1px solid color-mix(in srgb, var(--bg) 12%, transparent); padding-top:22px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:13px; }
.demo-badge{ display:inline-flex; align-items:center; gap:8px; padding:7px 14px; border-radius:999px; background:color-mix(in srgb, var(--accent) 18%, transparent); color:var(--accent); font-family:var(--f-head); font-weight:600; font-size:12.5px; border:1px solid color-mix(in srgb, var(--accent) 30%, transparent); }

@media (max-width:940px){
  .section{ padding:64px 0; }
  .consol-grid{ grid-template-columns:1fr; }
  .bento{ grid-template-columns:1fr; } .bento .b-lg{ grid-column:span 1; }
  .foot-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:620px){ .nav-links{ display:none; } }
@media (prefers-reduced-motion:reduce){ *{ animation:none !important; } .reveal{ opacity:1 !important; transform:none !important; } html{ scroll-behavior:auto; } }