:root {
--font-display: Amulya, ui-sans-serif, system-ui, sans-serif;
--font-sans: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
--color-primary-50: 240 249 255;
--color-primary-100: 224 242 254;
--color-primary-200: 186 230 253;
--color-primary-300: 125 211 252;
--color-primary-400: 56 189 248;
--color-primary-500: 14 165 233;
--color-primary-600: 2 132 199;
--color-primary-700: 3 105 161;
--color-primary-800: 7 89 133;
--color-primary-900: 12 74 110;
--color-primary-950: 8 47 73;
--color-primary-DEFAULT: var(--color-primary-500);
--color-gray-50: 250 250 250;
--color-gray-100: 245 245 245;
--color-gray-200: 229 229 229;
--color-gray-300: 212 212 212;
--color-gray-400: 163 163 163;
--color-gray-500: 115 115 115;
--color-gray-600: 82 82 82;
--color-gray-700: 64 64 64;
--color-gray-800: 38 38 38;
--color-gray-900: 23 23 23;
--color-gray-950: 10 10 10;
}
html.cgi-dark { --color-primary-DEFAULT: var(--color-primary-400); }


/* ── Video grid ──────────────────────────────────────────────────── */
.vid-card { position:relative; overflow:hidden; border-radius:1rem; background:#000; cursor:pointer; }
.vid-card video { width:100%; height:100%; object-fit:cover; display:block; transition:opacity .3s; }
.vid-card .vid-overlay { position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end; padding:1.25rem; background:linear-gradient(to top, rgba(0,0,0,.7) 0%, transparent 60%); opacity:1; transition:opacity .2s; pointer-events:none; }
.vid-card .vid-play { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:52px; height:52px; background:rgba(255,255,255,.18); backdrop-filter:blur(4px); border-radius:50%; display:flex; align-items:center; justify-content:center; transition:opacity .2s, transform .2s; }
.vid-card:hover .vid-play { opacity:0; }
.vid-card:hover video { opacity:.9; }
.vid-card .vid-label { color:#fff; font-weight:600; font-size:.95rem; line-height:1.3; }
.vid-card .vid-tag { font-size:.75rem; color:rgba(255,255,255,.65); margin-bottom:.25rem; }

/* ── FAQ accordion ───────────────────────────────────────────────── */
.faq-item { border-bottom:1px solid rgb(var(--color-gray-200)); }
html.cgi-dark .faq-item { border-color:rgb(var(--color-gray-700)); }
.faq-q { display:flex; gap:.75rem; align-items:center; padding:1.5rem 0; cursor:pointer; width:100%; text-align:left; background:none; border:none; font-family:inherit; font-size:1rem; font-weight:700; color:rgb(var(--color-gray-900)); }
html.cgi-dark .faq-q { color:rgb(var(--color-gray-100)); }
.faq-q svg { width:20px; height:20px; flex-shrink:0; margin-left:auto; transition:transform .2s; }
.faq-item.open .faq-q svg { transform:rotate(90deg); }
.faq-a { display:none; padding-bottom:1.25rem; padding-right:2rem; font-size:.9375rem; color:rgb(var(--color-gray-500)); line-height:1.7; }
html.cgi-dark .faq-a { color:rgb(var(--color-gray-400)); }
.faq-item.open .faq-a { display:block; }

/* ── Process steps ───────────────────────────────────────────────── */
.process-step { display:flex; gap:1.5rem; align-items:flex-start; }
.process-num { flex-shrink:0; width:3rem; height:3rem; border-radius:50%; background:rgb(var(--color-primary-500)); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:1.125rem; font-family:var(--font-display); }

/* ── Benefits grid ───────────────────────────────────────────────── */
.benefit-card { padding:2rem; border-radius:1.25rem; background:rgb(var(--color-gray-50)); border:1px solid rgb(var(--color-gray-200)); }
html.cgi-dark .benefit-card { background:rgb(var(--color-gray-900)); border-color:rgb(var(--color-gray-800)); }
.benefit-icon { width:3rem; height:3rem; border-radius:.75rem; background:rgb(var(--color-primary-50)); display:flex; align-items:center; justify-content:center; margin-bottom:1.25rem; flex-shrink:0; }
html.cgi-dark .benefit-icon { background:rgba(var(--color-primary-500)/.15); }

/* ── Client logos strip ──────────────────────────────────────────── */
.logos-strip { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; align-items:center; }
.logos-strip img { height:1.75rem; width:auto; max-width:100%; object-fit:contain; object-position:center; filter:grayscale(1); opacity:.5; transition:opacity .2s; margin:0 auto; display:block; }
.logos-strip img:hover { opacity:.9; }
html.cgi-dark .logos-strip img { filter:grayscale(1) invert(1) !important; }
@media (min-width:640px)  { .logos-strip { grid-template-columns:repeat(4,1fr); gap:1.5rem 2rem; } }
@media (min-width:1024px) { .logos-strip { display:flex; flex-wrap:nowrap; justify-content:space-between; gap:1rem; } }
@media (min-width:1024px) { .logos-strip img { height:1.75rem; max-width:7rem; margin:0; } }

/* ── Testimonials scroll ─────────────────────────────────────────── */
.testimonials-scroll { display:flex; gap:1.5rem; overflow-x:auto; padding-bottom:1.5rem; scroll-snap-type:x mandatory; scrollbar-width:thin; align-items:stretch; }
.testimonial-card { flex-shrink:0; width:min(36rem, 90vw); min-height:22rem; background:rgb(var(--color-gray-100)); border-radius:1.5rem; padding:2.5rem; scroll-snap-align:start; display:flex; flex-direction:column; }
html.cgi-dark .testimonial-card { background:rgb(var(--color-gray-900)); }
.testimonial-card > p { flex:1; }
.testimonial-card > div:last-child { margin-top:auto; padding-top:1.5rem; }

/* ── Video lightbox ──────────────────────────────────────────────── */
#vid-lightbox { position:fixed; inset:0; z-index:10000; background:rgba(0,0,0,.9); display:none; align-items:center; justify-content:center; padding:1rem; }
#vid-lightbox.open { display:flex; }
#vid-lightbox video { max-width:min(90vw, 1280px); max-height:85vh; width:100%; border-radius:.75rem; outline:none; }
#vid-lightbox-close { position:absolute; top:1rem; right:1rem; width:2.75rem; height:2.75rem; border-radius:50%; background:rgba(255,255,255,.15); border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; color:#fff; transition:background .15s; }
#vid-lightbox-close:hover { background:rgba(255,255,255,.3); }

/* ── Workflow stacked pages ──────────────────────────────────────── */
.workflow-stack { position:relative; }
.workflow-stack > img { position:relative; z-index:4; display:block; width:100%; border-radius:1rem; box-shadow:0 20px 40px rgba(0,0,0,.12); }
.ws-page { position:absolute; inset:0; border-radius:.875rem; background:#fff; border:1px solid rgb(var(--color-gray-200)); box-shadow:0 2px 10px rgba(0,0,0,.06); }
html.cgi-dark .ws-page { background:rgb(var(--color-gray-800)); border-color:rgb(var(--color-gray-700)); }
.ws-page-1 { z-index:3; transform:translate(10px, 10px); }
.ws-page-2 { z-index:2; transform:translate(20px, 20px); opacity:.75; }
.ws-page-3 { z-index:1; transform:translate(30px, 30px); opacity:.5; }


/* ── DAM diagram (Infrastructure section) ───────────────────────── */
.dam-diagram { display:flex; flex-direction:column; gap:1rem; align-items:stretch; }
.dam-side, .dam-center { display:flex; flex-direction:column; gap:1rem; }
.dam-side { flex:1 1 0; min-width:0; }
.dam-center { flex:0 0 auto; align-items:stretch; }

.dam-card { padding:1.25rem 1.5rem; border-radius:.875rem; text-align:center; }
.dam-card h3 { font-size:1.0625rem; font-weight:700; font-family:var(--font-display); }
.dam-card p { font-size:.8125rem; margin-top:.25rem; }
.dam-card-side { border:2px solid rgb(var(--color-primary-500) / .3); background:#fff; }
html.cgi-dark .dam-card-side { background:rgb(var(--color-gray-900)); }
.dam-card-side h3 { color:rgb(var(--color-gray-900)); }
html.cgi-dark .dam-card-side h3 { color:rgb(var(--color-gray-100)); }
.dam-card-side p { color:rgb(var(--color-gray-500)); }
.dam-card-side.is-active { border-color:rgb(var(--color-primary-500)); box-shadow:0 4px 14px rgba(14,165,233,.15); }
.dam-card-side.is-active h3 { color:rgb(var(--color-primary-500)); }
.dam-card-center { background:rgb(var(--color-gray-900)); color:#fff; box-shadow:0 12px 28px rgba(0,0,0,.18); }
html.cgi-dark .dam-card-center { background:rgb(var(--color-gray-800)); }
.dam-card-center h3 { color:rgb(var(--color-primary-400)); font-size:1.25rem; letter-spacing:.025em; }
.dam-card-center p { color:rgba(255,255,255,.75); }

/* Arrow between sides */
.dam-arrow-wrap { display:flex; align-items:center; justify-content:center; flex-shrink:0; color:rgb(var(--color-gray-400)); padding:.25rem 0; }
html.cgi-dark .dam-arrow-wrap { color:rgb(var(--color-gray-600)); }
.dam-arrow-wrap svg { width:32px; height:32px; transform:rotate(90deg); }

/* Production: vertical connector + card */
.dam-conn-vert { width:2px; height:1.25rem; background:rgb(var(--color-gray-300)); align-self:center; }
html.cgi-dark .dam-conn-vert { background:rgb(var(--color-gray-700)); }
.dam-prod-card { padding:.875rem 1.5rem; border-radius:.875rem; background:rgb(var(--color-primary-500)); color:#fff; text-align:center; box-shadow:0 8px 20px rgba(14,165,233,.25); }
.dam-prod-card h4 { font-size:1.0625rem; font-weight:700; font-family:var(--font-display); }
.dam-prod-card p { font-size:.8125rem; color:rgba(255,255,255,.9); margin-top:.125rem; }

/* Logos: 2 cols, fits next to Production card */
.dam-logos { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:.45rem .55rem; }
.dam-logo { display:flex; align-items:center; justify-content:center; padding:.5rem .375rem; border-radius:.5rem; background:rgb(var(--color-gray-50)); border:1px solid rgb(var(--color-gray-200)); font-size:.7rem; font-weight:600; color:rgb(var(--color-gray-600)); text-align:center; line-height:1.2; min-height:2.1rem; }
html.cgi-dark .dam-logo { background:rgb(var(--color-gray-900)); border-color:rgb(var(--color-gray-800)); color:rgb(var(--color-gray-300)); }

/* Desktop: 5-column row layout (side / arrow / center / arrow / side) */
@media (min-width: 900px) {
  .dam-diagram { flex-direction:row; align-items:flex-start; gap:.75rem; }
  .dam-arrow-wrap { padding-top:2rem; }
  .dam-arrow-wrap svg { transform:none; }
  .dam-center { flex:0 0 auto; max-width:14rem; }
}

/* ── Download Price List button hover ───────────────────────────── */
#btn-pricelist:hover { background: rgb(14 165 233) !important; color: #fff !important; border-color: transparent; }

/* ── Margin utilities (not present in compiled CSS copy) ─────────── */
.mb-4  { margin-bottom: 1rem; }
.mb-6  { margin-bottom: 1.5rem; }
.mb-8  { margin-bottom: 2rem; }
.mb-10 { margin-bottom: 2.5rem; }
.mb-12 { margin-bottom: 3rem; }
.mb-16 { margin-bottom: 4rem; }
.mb-20 { margin-bottom: 5rem; }
.mt-2  { margin-top: .5rem; }
.mt-3  { margin-top: .75rem; }
.mt-4  { margin-top: 1rem; }
.mt-6  { margin-top: 1.5rem; }
.mt-8  { margin-top: 2rem; }
.mt-10 { margin-top: 2.5rem; }
.mt-12 { margin-top: 3rem; }
/* aspect-ratio utilities */
.aspect-video { aspect-ratio: 16 / 9; }
.aspect-square { aspect-ratio: 1 / 1; }

/* ── Calendar scheduler (demo booking form) ──────────────────────── */
.step-dots { display:flex; gap:.5rem; align-items:center; }
.step-dot { width:.625rem; height:.625rem; border-radius:50%; background:#e5e7eb; transition:background .2s; }
.step-dot.active { background:rgb(var(--color-primary-500)); }
.sched-card { background:#fff; border-radius:1.5rem; padding:2rem; box-shadow:0 8px 48px rgba(0,0,0,.2); }
.sched-step { display:none; }
.sched-step.active { display:block; }
.cal-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:1rem; }
.cal-month-label { font-size:.9375rem; font-weight:700; color:#111; }
.cal-nav { width:2rem; height:2rem; border-radius:.5rem; border:1px solid #e5e7eb; background:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; color:#555; transition:background .15s; flex-shrink:0; }
.cal-nav:hover { background:#f3f4f6; }
.cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:.2rem; }
.cal-dow { text-align:center; font-size:.625rem; font-weight:700; color:#9ca3af; text-transform:uppercase; padding:.25rem 0; letter-spacing:.04em; }
.cal-day { text-align:center; padding:.5rem .125rem; border-radius:.4375rem; font-size:.8125rem; cursor:pointer; transition:background .12s,color .12s; color:#111; background:transparent; border:none; font-family:inherit; width:100%; }
.cal-day:hover:not(:disabled) { background:rgb(var(--color-primary-50)); color:rgb(var(--color-primary-600)); }
.cal-day.selected { background:rgb(var(--color-primary-500)); color:#fff; font-weight:700; }
.cal-day.today:not(.selected):not(:disabled) { font-weight:700; box-shadow:inset 0 0 0 1.5px rgb(var(--color-primary-400)); color:rgb(var(--color-primary-600)); }
.cal-day:disabled { color:#d1d5db; cursor:not-allowed; background:transparent; }
.cal-day.cal-empty { cursor:default; pointer-events:none; }
.time-slots-wrap { margin-top:1.125rem; border-top:1px solid #f3f4f6; padding-top:1.125rem; }
.time-slots-label { font-size:.8125rem; font-weight:600; color:#374151; margin-bottom:.5rem; display:flex; align-items:baseline; gap:.375rem; flex-wrap:wrap; }
.time-slots-label span { font-weight:400; color:#9ca3af; font-size:.75rem; }
.time-slots-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:.3rem; }
.time-slot { padding:.5rem .125rem; border-radius:.4375rem; border:1px solid #e5e7eb; background:#fff; font-size:.75rem; text-align:center; cursor:pointer; transition:all .12s; color:#374151; font-family:inherit; line-height:1.3; }
.time-slot:hover { border-color:rgb(var(--color-primary-400)); color:rgb(var(--color-primary-600)); background:rgb(var(--color-primary-50)); }
.time-slot.selected { background:rgb(var(--color-primary-500)); border-color:rgb(var(--color-primary-500)); color:#fff; font-weight:600; }
.sched-summary { display:flex; align-items:flex-start; gap:.625rem; background:rgb(var(--color-primary-50)); border:1px solid rgb(var(--color-primary-100)); border-radius:.75rem; padding:.75rem 1rem; margin-bottom:1.25rem; font-size:.875rem; color:rgb(var(--color-primary-700)); line-height:1.5; }
.sched-field { display:flex; flex-direction:column; gap:.3rem; }
.sched-field label { font-size:.8125rem; font-weight:600; color:#374151; }
.sched-field input,.sched-field select,.sched-field textarea { width:100%; padding:.5625rem .8125rem; border-radius:.5625rem; border:1px solid #d1d5db; font-size:.9375rem; font-family:inherit; background:#fff; color:#111; transition:border-color .15s; outline:none; box-sizing:border-box; }
.sched-field input:focus,.sched-field select:focus,.sched-field textarea:focus { border-color:rgb(var(--color-primary-500)); box-shadow:0 0 0 3px rgba(14,165,233,.12); }
.sched-field input::placeholder,.sched-field textarea::placeholder { color:#9ca3af; }
.sched-err { font-size:.8125rem; color:#ef4444; margin-top:.2rem; display:none; }
.sched-err.show { display:block; }
#sched-btn-next:disabled { opacity:.45; cursor:not-allowed; }
/* ── Dark mode: text colors missing from compiled main.css ───────── */
html.cgi-dark .text-gray-900 { color: rgb(var(--color-gray-100)) !important; }
html.cgi-dark .text-gray-800 { color: rgb(var(--color-gray-200)) !important; }
/* ── Dark mode: Download Price List button ───────────────────────── */
html.cgi-dark #btn-pricelist { background: rgb(var(--color-gray-800)) !important; color: rgb(var(--color-gray-100)) !important; border-color: rgb(var(--color-gray-600)) !important; }

/* ── Mobile menu: solid header when open ─────────────────────────── */
@media (max-width: 1023px) {
  header.mobile-menu-open {
    background: rgba(255,255,255,.97) !important;
    backdrop-filter: blur(12px) !important;
    box-shadow: 0 2px 12px rgba(0,0,0,.08) !important;
  }
  html.cgi-dark header.mobile-menu-open {
    background: rgba(10,10,10,.97) !important;
  }
}

/* ── Hero badge: flow statically on mobile ───────────────────────── */
@media (max-width: 639px) {
  .hero-badge { position: static !important; display: inline-flex; margin-top: 0.875rem; }
}

/* ── Modal small screens ─────────────────────────────────────────── */
@media (max-width: 480px) {
  #pricelist-dialog { padding: 1.5rem !important; border-radius: .875rem !important; }
}
/* ── Modal dark mode ─────────────────────────────────────────────── */
html.cgi-dark #pricelist-dialog { background: rgb(var(--color-gray-900)) !important; }
html.cgi-dark #pricelist-modal-title { color: rgb(var(--color-gray-100)) !important; }
html.cgi-dark #pricelist-dialog > div p,
html.cgi-dark #pricelist-success > p { color: rgb(var(--color-gray-400)) !important; }
html.cgi-dark #pricelist-dialog label { color: rgb(var(--color-gray-300)) !important; }
html.cgi-dark #pricelist-dialog input[type="text"],
html.cgi-dark #pricelist-dialog input[type="email"] { background: rgb(var(--color-gray-800)) !important; border-color: rgb(var(--color-gray-600)) !important; color: rgb(var(--color-gray-100)) !important; }
html.cgi-dark #pricelist-dialog input::placeholder { color: rgb(var(--color-gray-500)) !important; }
html.cgi-dark #pricelist-form-wrap > div:first-child { background: rgba(var(--color-primary-500)/.15) !important; }
html.cgi-dark #pricelist-close { color: rgb(var(--color-gray-400)) !important; }
html.cgi-dark #pricelist-success h3 { color: rgb(var(--color-gray-100)) !important; }
html.cgi-dark #pricelist-success p { color: rgb(var(--color-gray-400)) !important; }

/* CTA sections: symmetric spacing around dark cards */
:is(.entry-content,.entry-content-wrap) .cgi-csec.cgi-csec-cta{padding-bottom:8rem}