:root{
  --bg:#e8f7e6; /* pale light-green page background */
  --surface:#07321f; /* primary dark text / surface accent */
  --card:#f7fff7; /* card & modal surface (very light green) */
  --accent1:#38c776; /* lighter green accent */
  --accent2:#2fb364; /* complementary lighter green */
  --text:#07321f; /* main text color (dark green) */
  --muted:rgba(7,50,31,0.72);
  --muted-weak:rgba(7,50,31,0.44);
  --radius:12px;
  --container-max:1100px;
  --glass: rgba(7,50,31,0.03);
  --shadow-soft: 0 6px 18px rgba(6,40,25,0.06);
  --glow: 0 8px 28px rgba(163,255,190,0.06);
  font-family: Roboto, Inter, system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial;
  color-scheme: light;
}

/* Base reset */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  /* simplified smooth background to avoid visible patchiness */
  /* uniform light-green background */
  background: var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.5;
  font-size:17px;
  -webkit-tap-highlight-color: transparent;
}

/* containers */
.container{
  width:100%;
  max-width:var(--container-max);
  margin:0 auto;
  padding:28px 20px;
}

/* header */
.site-header{position:sticky;top:0;z-index:60;background:linear-gradient(180deg, rgba(231,255,241,0.85), transparent);backdrop-filter:blur(6px)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{font-weight:700;color:var(--white);text-decoration:none;font-family:Inter, sans-serif}
.brand-logo{
  width:96px;
  height:96px;
  object-fit:contain;
  display:block;
  flex:0 0 96px;
  border-radius:10px;
  margin-right:12px;
}

/* Brand wrap: company name and short tagline placed near the primary brand text */
.brand-wrap{
  display:flex;
  align-items:center;
  gap:12px;
  /* pin brand to top-left of the viewport */
  position: absolute;
  left: 12px;
  top: 8px;
  z-index: 70;
  padding-left: 0;
  /* ensure logos + text stay together and do not wrap awkwardly */
  flex-wrap:nowrap;
}

/* new stacked logos group */
.brand-logos{
  display:flex;
  /* place logos in a single group (vertical stack) */
  flex-direction:column;
  align-items:center;
  gap:8px;
}

/* Skolkovo logo — increased size, sits above the PROGRESS logo */
.sk-logo{
  width:96px;
  height:auto;
  object-fit:contain;
  display:block;
  flex:0 0 auto;
  border-radius:6px;
}

/* keep existing brand-logo sizing but allow it to shrink slightly on small screens */
.brand-logo{
  /* make same size as sk-logo (matching the request) */
  width:96px;
  height:auto;
  object-fit:contain;
  display:block;
  flex:0 0 auto;
  border-radius:6px;
  margin-right:0;
}

/* Brand sub — make text smaller and solid black for higher contrast */
.brand-sub { color: #000; line-height:1; }
.brand-sub .company{ font-size:12px; font-weight:600; color:#000; }
/* increased size and weight for the shortened tagline */
.brand-sub .tagline{ font-size:14px; color:#000; font-weight:800; letter-spacing:0.2px; }

/* ensure mobile spacing remains compact */
@media (max-width:880px){
  .brand-logos{gap:6px; flex-direction:column}
  .sk-logo{width:72px}
  .brand-logo{width:72px;height:auto;flex:0 0 72px;margin-right:0}
  .brand-wrap{
    gap:8px;
    align-items:center;
    /* keep the brand pinned on narrow screens but reduce offsets */
    position: absolute;
    left: 10px;
    top: 8px;
    padding-left: 0;
  }
  .brand-sub .company{font-size:11px}
  .brand-sub .tagline{font-size:12px}
}
.menu-btn{display:inline-flex;align-items:center;justify-content:center;background:transparent;border:0;color:var(--muted);font-size:20px;padding:10px;border-radius:6px}
.nav-list{list-style:none;display:flex;gap:12px;align-items:center;margin:0;padding:0}
.nav-list a{color:var(--muted);text-decoration:none;padding:10px 12px;border-radius:6px;font-weight:500;transition:all 220ms ease}
.nav-list a:hover{color:var(--white);box-shadow:var(--neon-glow);transform:translateY(-2px)}
.cta{background:linear-gradient(90deg,var(--accent1),var(--accent2));color:#021; padding:8px 12px;border-radius:8px;font-weight:700;box-shadow:var(--neon-glow)}

/* hero */
.hero{position:relative;min-height:68vh;display:flex;align-items:center;padding-bottom:10vh}
.hero-media{position:absolute;inset:0;overflow:hidden;border-bottom-left-radius:20px;border-bottom-right-radius:20px;display:flex;align-items:center;justify-content:center}
.hero-carousel{position:absolute;inset:0;height:100%;width:100%;overflow:hidden}
.hero-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .9s ease}
.hero-image.active{opacity:1}
.hero-overlay{position:absolute;inset:0;background:transparent;pointer-events:none}
.hero-content{position:relative;padding:56px 20px;z-index:2}

/* Brighten hero images for stronger visual impact */
/* removed forced filter so original images render without lighting/contrast modifications */
/* .hero-image{
  filter:brightness(1.08) contrast(1.06) saturate(1.08);
} */

/* Apple-style glass window behind hero text for contrast */
.hero-glass{
  display:inline-block;
  max-width:820px;
  /* Slightly more transparent and lightly tinted for softer contrast, shifted left */
  background: linear-gradient(180deg, rgba(235,255,238,0.75), rgba(247,255,247,0.70));
  color: var(--text);
  padding:22px;
  border-radius:18px;
  box-shadow: 0 8px 30px rgba(7,50,31,0.06), 0 1px 0 rgba(255,255,255,0.22) inset;
  border: 1px solid rgba(47,179,100,0.08);
  backdrop-filter: blur(10px) saturate(1.06);
  transform: translateX(-6%);
  transition: transform .28s ease, background .28s ease;
}

/* Slightly darken title inside glass for legibility */
.hero-glass .title{ color:var(--surface); }
/* make subtitle visually darker for improved contrast (near-black) */
.hero-glass .subtitle{ color:#000; }

/* Ensure hero actions sit nicely on narrow screens inside the glass */
@media (max-width:880px){
  .hero-glass{width:100%;padding:16px;transform:none}
  .hero-content{padding:24px}
}
.title{font-family:Inter, sans-serif;font-weight:700;font-size:clamp(22px,5vw,44px);margin:0 0 8px;letter-spacing:-0.01em}
.subtitle{color:var(--muted);max-width:64ch;margin:0 0 18px}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:var(--radius);text-decoration:none;font-weight:600;box-shadow:var(--shadow-soft);transition:transform .18s ease, box-shadow .18s ease}
.btn-accent{background:linear-gradient(90deg,var(--accent1),var(--accent2));color:#021;transition:transform .18s ease, box-shadow .18s ease}
.btn-accent:hover{transform:translateY(-4px);box-shadow:0 20px 46px rgba(47,179,100,0.14)}
.btn-ghost{background:transparent;border:1px solid rgba(255,255,255,0.06);color:var(--white);transition:box-shadow .18s ease,transform .18s ease}
.btn-ghost:hover{box-shadow:0 18px 40px rgba(47,179,100,0.10);transform:translateY(-3px)}
.hero-anchors{margin-top:18px;display:flex;gap:8px;flex-wrap:wrap}
.anchor-pill{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));padding:8px 12px;border-radius:999px;color:#000;text-decoration:none;font-weight:500;transition:all .18s ease}
.anchor-pill:hover{background:rgba(255,255,255,0.03);color:var(--white);box-shadow:var(--neon-glow)}

/* sections */
.section{padding:44px 20px}
.section-title{font-family:Inter,sans-serif;font-weight:700;margin:0 0 8px;font-size:21px;color:#000}
.lead{color:var(--muted);margin:0 0 16px}
.section-grid{display:grid;grid-template-columns:1fr 360px;gap:22px;align-items:center}
.card{background: linear-gradient(180deg, var(--card), rgba(247,255,247,0.94)); padding:18px;border-radius:var(--radius);box-shadow:var(--shadow-soft);transition:transform .22s ease,box-shadow .22s ease; border:1px solid rgba(7,50,31,0.06)}
.card:hover{transform:translateY(-4px);box-shadow:0 18px 36px rgba(7,50,31,0.06)}
.ill{width:100%;height:auto;display:block;border-radius:6px;overflow:hidden}

/* calculator */
.calculator{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;background:linear-gradient(180deg, rgba(255,255,255,0.01), transparent);padding:16px;border-radius:var(--radius);margin-top:12px}
.calculator label{display:flex;flex-direction:column;color:var(--text);font-weight:500}
.calculator input{margin-top:8px;padding:10px;border-radius:8px;border:0;background:#03131a;color:var(--white);font-weight:600}
.calc-result{grid-column:1/-1;display:flex;justify-content:space-between;padding:12px;background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.005));border-radius:8px;margin-top:8px}
.note{color:var(--muted);font-size:14px;margin-top:12px}

/* features */
.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-top:12px}
.feature{background:transparent;padding:16px;border-radius:var(--radius);border:1px solid rgba(255,255,255,0.02);transition:box-shadow .18s ease,transform .18s ease}
.feature:hover{box-shadow:var(--neon-glow);transform:translateY(-6px)}

/* Highlight specific core feature tiles with framed card look */
.feature[data-feature="health"],
.feature[data-feature="analytics"],
.feature[data-feature="integration"],
.feature[data-feature="ai"],
.feature[data-feature="browser"] {
  background: linear-gradient(180deg, var(--card), rgba(247,255,247,0.96));
  border: 1px solid rgba(7,50,31,0.06);
  box-shadow: 0 10px 26px rgba(7,50,31,0.06);
  transform: translateZ(0);
}

/* Slightly stronger hover lift for highlighted tiles */
.feature[data-feature="health"]:hover,
.feature[data-feature="analytics"]:hover,
.feature[data-feature="integration"]:hover,
.feature[data-feature="ai"]:hover,
.feature[data-feature="browser"]:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 46px rgba(7,50,31,0.08);
}
.icon{width:52px;height:52px;display:block;margin-bottom:12px;filter:grayscale(0.25)}
/* schematic-black: convert light/white schematic assets to solid dark for consistent display */
.icon.schematic-black{
  filter: invert(1) grayscale(1) contrast(1.05);
}

/* added: small inline icon for feature headings */
.feature h3{display:flex;align-items:center;gap:8px;margin:0 0 8px;font-size:16px}
.feature .feature-icon-small{width:20px;height:20px;display:inline-block;filter:grayscale(0);opacity:0.98;border-radius:6px;}

/* trust */
.trust-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-top:12px}
.trust-item{padding:14px;border-radius:var(--radius);background:linear-gradient(180deg,rgba(255,255,255,0.01),rgba(255,255,255,0.005));border:1px solid rgba(255,255,255,0.02)}

/* footer */
.footer{padding:20px 0;margin-top:20px;border-top:1px solid rgba(255,255,255,0.03)}
.footer-grid{display:flex;gap:12px;align-items:center;justify-content:space-between}

/* reveal animations */
.reveal{opacity:0;transform:translateY(14px);will-change:opacity,transform;transition:opacity .6s cubic-bezier(.15,.9,.35,1), transform .6s cubic-bezier(.15,.9,.35,1)}
.reveal.visible{opacity:1;transform:translateY(0)}

/* subtle decorative geometry (very low contrast) */
.bg-geom{
  position:absolute;inset:auto 0 0 0;height:120px;pointer-events:none;opacity:.035;
  background:radial-gradient(350px 80px at 10% 60%, rgba(124,255,178,0.06), transparent 10%),
             radial-gradient(300px 120px at 90% 40%, rgba(34,211,238,0.04), transparent 12%);
  mix-blend-mode:screen;
}

/* responsive tweaks */
@media (max-width:880px){
  .nav-list{display:none;position:absolute;right:16px;top:64px;background:rgba(2,6,23,0.95);flex-direction:column;padding:12px;border-radius:10px}
  .nav-list.show{display:flex}
  .section-grid{grid-template-columns:1fr}
  .hero-content{padding:24px}
  .container{padding:18px}
}
.small{font-size:14px}
.muted{color:var(--muted)}
.muted-weak{color:var(--muted-weak)}

/* Global rounded treatment for a softer visual language */
:where(button, input, textarea, select, .card, .feature, .dg-modal-card, .hero-media, .hero-video, img, .ill, .btn, .nav-list, .trust-item, .calculator, .modal, .dg-modal-backdrop) {
  border-radius: var(--radius) !important;
  overflow: hidden;
}

/* Modal / demo UI - glassy compact variant */
.dg-modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:120;font-family:inherit}
.dg-modal-backdrop{position:absolute;inset:0;background:rgba(231,255,241,0.8);backdrop-filter:blur(6px) saturate(1.02)}
.dg-modal-card{
  --pad:14px;
  position:relative;z-index:2;
  /* Use the site's light green card color with a subtle green border and softer corners */
  background: linear-gradient(180deg, var(--card), rgba(231,255,241,0.96));
  border:1px solid rgba(47,179,100,0.12);
  backdrop-filter: blur(6px) saturate(1.02);
  padding:var(--pad);
  border-radius:18px;
  max-width:820px;
  width:min(94%,820px);
  color:var(--text);
  box-shadow:0 18px 36px rgba(47,179,100,0.06);
  display:grid;
  gap:10px;
  transition:transform .18s ease, box-shadow .18s ease;
}
/* slightly reduced hover lift to keep the look calm */
.dg-modal-card:hover{transform:translateY(-4px);box-shadow:0 28px 60px rgba(47,179,100,0.12)}
/* header inside modal for compact info */
.dg-modal-header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:6px;border-bottom:1px solid rgba(47,179,100,0.06)}
.dg-modal-title{font-weight:700;font-size:17px;margin:0}
.dg-modal-close{background:transparent;border:0;color:var(--muted);padding:8px;border-radius:10px;cursor:pointer}
.dg-modal-close:hover{color:var(--text);box-shadow:0 8px 20px rgba(47,179,100,0.06);transform:translateY(-2px)}
/* body area */
.dg-modal-body{max-height:60vh;overflow:auto;padding-top:6px;color:var(--muted);font-size:15px}
.dg-modal-actions{display:flex;gap:8px;justify-content:flex-end;padding-top:6px}
.dg-modal-compact{max-width:540px;padding:12px}
.dg-modal-small .dg-modal-body{max-height:44vh;font-size:14px}

/* Dashboard-specific light-green inputs and lighter buttons
   Also apply same style to calculator inputs so they match role/ID controls */
#roleSelect,
#selectedId,
#earTag,
#inputHeads,
#inputRevenue,
#inputSavings,
#inputSoftware {
  background: var(--bg) !important;
  color: var(--text) !important;
  border: 1px solid rgba(7,50,31,0.06);
  padding: 8px;
  border-radius: 8px;
}

/* Remove visible border/frame for specific action buttons (override any default) */
#openClientCases,
#bindBtn {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background-clip: padding-box;
  /* keep accent coloring but remove hard frame */
  background: linear-gradient(90deg, rgba(56,199,118,0.96), rgba(47,179,100,0.96));
  color: #021;
  padding: 10px 14px;
  border-radius: 10px;
  cursor: pointer;
}

/* Make primary accent buttons lighter and less saturated for a softer look */
.btn-accent {
  background: linear-gradient(90deg, rgba(56,199,118,0.96), rgba(47,179,100,0.96));
  color: #021;
  box-shadow: 0 10px 26px rgba(47,179,100,0.08);
}
.btn-accent:hover {
  transform: translateY(-3px);
  box-shadow: 0 24px 52px rgba(47,179,100,0.14);
}

/* Make ghost buttons slightly lighter border and text */
.btn-ghost {
  background: transparent;
  border: 1px solid rgba(7,50,31,0.08);
  color: var(--text);
}
.btn-ghost:hover {
  box-shadow: 0 14px 36px rgba(7,50,31,0.06);
  transform: translateY(-2px);
}