/* =========================================================
   Dimasol — Design tokens
   Theme: "helpdesk control board" — light, operational, calm
   ========================================================= */
:root{
  --paper:#F5F6F8;
  --panel:#FFFFFF;
  --ink:#171B26;
  --ink-soft:#5B6472;
  --line:#DFE3EA;
  --line-soft:#EBEEF2;

  --brand:#2547E0;
  --brand-dark:#1B36B0;
  --brand-soft:#EAEEFD;

  --good:#17A673;
  --good-soft:#E4F7EF;

  --amber:#E2963A;
  --amber-soft:#FBF0DF;

  --radius:14px;
  --radius-sm:8px;
  --shadow-sm:0 1px 2px rgba(23,27,38,.06);
  --shadow-md:0 8px 24px rgba(23,27,38,.08);
  --shadow-lg:0 20px 48px rgba(23,27,38,.14);
}

html{ scroll-behavior:smooth; }

body{
  background:var(--paper);
  color:var(--ink);
  font-family:'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  line-height:1.65;
}

h1,h2,h3,h4,.display-font{
  font-family:'Space Grotesk', 'Inter', sans-serif;
  font-weight:600;
  letter-spacing:-0.01em;
  color:var(--ink);
}

.mono{
  font-family:'IBM Plex Mono', ui-monospace, monospace;
  letter-spacing:0.01em;
}

a{ color:var(--brand); text-decoration:none; }
a:hover{ color:var(--brand-dark); }

.text-soft{ color:var(--ink-soft); }
.bg-paper{ background:var(--paper); }
.bg-panel{ background:var(--panel); }

/* ---------- Buttons ---------- */
.btn-brand{
  background:var(--brand);
  border:1px solid var(--brand);
  color:#fff;
  font-weight:600;
  padding:.7rem 1.5rem;
  border-radius:var(--radius-sm);
  transition:all .18s ease;
}
.btn-brand:hover{ background:var(--brand-dark); border-color:var(--brand-dark); color:#fff; transform:translateY(-1px); }

.btn-outline-ink{
  background:transparent;
  border:1px solid var(--line);
  color:var(--ink);
  font-weight:600;
  padding:.7rem 1.5rem;
  border-radius:var(--radius-sm);
  transition:all .18s ease;
}
.btn-outline-ink:hover{ border-color:var(--brand); color:var(--brand); }

.btn-ghost-light{
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.35);
  color:#fff;
  font-weight:600;
  padding:.7rem 1.5rem;
  border-radius:var(--radius-sm);
}
.btn-ghost-light:hover{ background:rgba(255,255,255,.22); color:#fff; }

/* ---------- Navbar ---------- */
.navbar-dimasol{
  background:var(--panel);
  border-bottom:1px solid var(--line);
  padding:.6rem 0;
}
.navbar-dimasol .navbar-brand img{ height:40px; }
.navbar-dimasol .nav-link{
  color:var(--ink);
  font-weight:500;
  padding:.5rem 1rem !important;
  position:relative;
}
.navbar-dimasol .nav-link.active,
.navbar-dimasol .nav-link:hover{ color:var(--brand); }
.navbar-dimasol .nav-link.active::after{
  content:"";
  position:absolute;
  left:1rem; right:1rem; bottom:.15rem;
  height:2px;
  background:var(--brand);
  border-radius:2px;
}
.navbar-dimasol .dropdown-menu{
  border:1px solid var(--line);
  box-shadow:var(--shadow-md);
  border-radius:var(--radius-sm);
  padding:.5rem;
}
.navbar-dimasol .dropdown-item{
  border-radius:6px;
  padding:.55rem .75rem;
  font-size:.93rem;
}
.navbar-dimasol .dropdown-item:hover{ background:var(--brand-soft); color:var(--brand-dark); }
.navbar-dimasol .btn-brand{ padding:.55rem 1.25rem; }

/* ---------- Hero ---------- */
.hero{
  background:
    radial-gradient(1100px 420px at 85% -10%, rgba(37,71,224,.10), transparent 60%),
    var(--paper);
  padding:5.5rem 0 4.5rem;
  border-bottom:1px solid var(--line);
}
.hero .eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  font-family:'IBM Plex Mono', monospace;
  font-size:.78rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--brand-dark);
  background:var(--brand-soft);
  border:1px solid #D7DEFB;
  padding:.35rem .75rem;
  border-radius:999px;
  margin-bottom:1.25rem;
}
.hero h1{ font-size:2.75rem; line-height:1.12; }
.hero p.lead{ color:var(--ink-soft); font-size:1.1rem; max-width:32rem; }

/* Page header (non-home pages) */
.page-header{
  background:var(--panel);
  border-bottom:1px solid var(--line);
  padding:3rem 0 2.5rem;
}
.page-header .eyebrow{
  font-family:'IBM Plex Mono', monospace;
  font-size:.78rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--brand-dark);
}
.page-header h1{ font-size:2.25rem; }

/* ---------- Signature element: live ticket board ---------- */
.ticket-board{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow-lg);
  overflow:hidden;
}
.ticket-board__bar{
  display:flex;
  align-items:center;
  gap:.5rem;
  padding:.85rem 1.1rem;
  border-bottom:1px solid var(--line);
  background:var(--line-soft);
}
.ticket-board__dot{ width:9px; height:9px; border-radius:50%; }
.ticket-board__title{
  font-family:'IBM Plex Mono', monospace;
  font-size:.78rem;
  color:var(--ink-soft);
  margin-left:.25rem;
}
.ticket-board__live{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:.4rem;
  font-family:'IBM Plex Mono', monospace;
  font-size:.72rem;
  color:var(--good);
}
.ticket-board__live .pulse{
  width:7px; height:7px; border-radius:50%;
  background:var(--good);
  animation:pulse 1.8s infinite;
}
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(23,166,115,.45); }
  70%{ box-shadow:0 0 0 7px rgba(23,166,115,0); }
  100%{ box-shadow:0 0 0 0 rgba(23,166,115,0); }
}
.ticket-row{
  display:flex;
  align-items:center;
  gap:.85rem;
  padding:.75rem 1.1rem;
  border-bottom:1px solid var(--line-soft);
  font-size:.88rem;
}
.ticket-row:last-child{ border-bottom:none; }
.ticket-row .tid{
  font-family:'IBM Plex Mono', monospace;
  color:var(--ink-soft);
  width:5.2rem;
  flex-shrink:0;
}
.ticket-row .tdesc{ flex:1; color:var(--ink); }
.ticket-row .tlang{
  font-size:.72rem;
  color:var(--ink-soft);
  border:1px solid var(--line);
  border-radius:6px;
  padding:.1rem .4rem;
  flex-shrink:0;
}
.pill{
  font-family:'IBM Plex Mono', monospace;
  font-size:.72rem;
  padding:.2rem .55rem;
  border-radius:999px;
  flex-shrink:0;
  white-space:nowrap;
}
.pill-open{ background:var(--amber-soft); color:#9A6118; }
.pill-progress{ background:var(--brand-soft); color:var(--brand-dark); }
.pill-resolved{ background:var(--good-soft); color:#0E7A54; }

/* ---------- Stat strip ---------- */
.stat-strip{
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:var(--panel);
}
.stat-strip .stat-num{
  font-family:'Space Grotesk', sans-serif;
  font-size:2rem;
  font-weight:700;
  color:var(--brand);
}
.stat-strip .stat-label{
  font-family:'IBM Plex Mono', monospace;
  font-size:.75rem;
  color:var(--ink-soft);
  text-transform:uppercase;
  letter-spacing:.04em;
}

/* ---------- Cards ---------- */
.card-dimasol{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:1.75rem;
  transition:transform .18s ease, box-shadow .18s ease;
}
.card-dimasol:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); }
.card-dimasol .icon-badge{
  width:46px; height:46px;
  border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  background:var(--brand-soft);
  color:var(--brand);
  font-size:1.1rem;
  margin-bottom:1rem;
}

/* ---------- Section helpers ---------- */
.section{ padding:4.5rem 0; }
.section-eyebrow{
  font-family:'IBM Plex Mono', monospace;
  font-size:.78rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--brand-dark);
  margin-bottom:.5rem;
  display:block;
}
.section-title{ font-size:2rem; margin-bottom:.75rem; }
.section-sub{ color:var(--ink-soft); max-width:42rem; }

/* ---------- Solutions tabs (solutions.php) ---------- */
.solutions-nav .nav-link{
  color:var(--ink);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  margin-right:.5rem;
  margin-bottom:.5rem;
  padding:.65rem 1.1rem;
  font-weight:600;
  font-size:.92rem;
  background:var(--panel);
}
.solutions-nav .nav-link i{ margin-right:.4rem; color:var(--brand); }
.solutions-nav .nav-link.active{
  background:var(--ink);
  border-color:var(--ink);
  color:#fff;
}
.solutions-nav .nav-link.active i{ color:#fff; }

.process-steps{
  background:var(--brand-soft);
  border-radius:var(--radius);
  padding:1.75rem;
}
.process-steps .step-num{
  font-family:'Space Grotesk', sans-serif;
  font-weight:700;
  color:var(--brand);
  font-size:1.3rem;
  margin-right:.6rem;
}

.features-list{ list-style:none; padding-left:0; margin:0; }
.features-list li{
  position:relative;
  padding-left:1.6rem;
  margin-bottom:.6rem;
  color:var(--ink-soft);
}
.features-list li::before{
  content:"\2713";
  position:absolute; left:0; top:0;
  color:var(--good);
  font-weight:700;
}

/* ---------- CTA band ---------- */
.cta-band{
  background:linear-gradient(120deg, var(--ink) 0%, #232B45 100%);
  color:#fff;
  border-radius:var(--radius);
  padding:3rem;
}
.cta-band h2{ color:#fff; }
.cta-band p{ color:rgba(255,255,255,.75); }

/* ---------- Footer ---------- */
footer.site-footer{
  background:var(--ink);
  color:rgba(255,255,255,.72);
  padding:3.5rem 0 1.5rem;
}
footer.site-footer h3{ color:#fff; font-size:1.05rem; }
footer.site-footer a{ color:rgba(255,255,255,.72); }
footer.site-footer a:hover{ color:#fff; }
footer.site-footer .footer-logo{
  font-family:'Space Grotesk', sans-serif;
  font-size:1.4rem;
  font-weight:700;
  color:#fff;
}
footer.site-footer .footer-logo span{ color:#7C93FF; }
footer.site-footer .social-links a{
  width:38px; height:38px;
  border-radius:50%;
  background:rgba(255,255,255,.08);
  display:inline-flex; align-items:center; justify-content:center;
  margin-right:.5rem;
}
footer.site-footer .social-links a:hover{ background:var(--brand); }
footer.site-footer hr{ border-color:rgba(255,255,255,.12); }

/* ---------- Forms ---------- */
.form-control, .form-select{
  background:var(--paper);
  border:1px solid var(--line);
  padding:.7rem .9rem;
  border-radius:var(--radius-sm);
}
.form-control:focus, .form-select:focus{
  border-color:var(--brand);
  box-shadow:0 0 0 .2rem var(--brand-soft);
}
.contact-card-info{
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:1.4rem;
  background:var(--panel);
  height:100%;
}
.contact-card-info i{ color:var(--brand); font-size:1.4rem; margin-bottom:.6rem; }

/* ---------- Misc ---------- */
.badge-lang{
  border:1px solid var(--line);
  border-radius:999px;
  padding:.3rem .7rem;
  font-size:.78rem;
  color:var(--ink-soft);
  margin-right:.35rem;
  display:inline-block;
  margin-bottom:.35rem;
}

@media (max-width: 767.98px){
  .hero h1{ font-size:2.1rem; }
  .cta-band{ padding:2rem; }
}