/* ============================================================
   DIGICRUX SOLUTIONS — GLOBAL STYLE SYSTEM
   This is the single source of truth for colors, typography,
   spacing, shadows and shared components (header, footer,
   buttons, floating contact button) across the WHOLE site.
   Every page includes this file — do not redefine these tokens
   anywhere else.
   ============================================================ */

:root{
  /* ---------- Brand colors ---------- */
  --navy:#0B1F3A;
  --navy-2:#122A4D;
  --brand-blue:#2E6FF2;
  --brand-blue-dark:#1D57D6;
  --teal:#0FBF9F;
  --wa-green:#25D366;
  --wa-green-hover:#1DA851;
  --red:#E8355A;

  --gradient-brand: linear-gradient(135deg, var(--brand-blue) 0%, var(--teal) 100%);

  /* ---------- Text ---------- */
  --text-body:#5A6478;
  --text-light:#8A93A6;
  --white:#ffffff;

  /* ---------- Surfaces / borders ---------- */
  --bg-soft:#F5F8FC;
  --bg-page:#F6F8FC;
  --border-color:rgba(11,31,58,0.08);

  /* ---------- Radius ---------- */
  --radius-sm:8px;
  --radius-md:14px;
  --radius-lg:20px;
  --radius-pill:999px;

  /* ---------- Spacing scale ---------- */
  --space-sm:16px;
  --space-md:32px;
  --space-lg:56px;
  --space-xl:80px;

  /* ---------- Layout ---------- */
  --header-h:72px;
  --container-max:1200px;

  /* ---------- Motion ---------- */
  --duration-fast:0.2s;
  --duration-base:0.3s;
  --duration-slow:0.5s;
  --ease-out:cubic-bezier(.22,.61,.36,1);

  /* ---------- Typography ---------- */
  --font-base:'Segoe UI', Inter, Arial, sans-serif;

  /* ---------- Shadows ---------- */
  --shadow-sm:0 4px 14px rgba(11,31,58,0.08);
  --shadow-md:0 10px 26px rgba(11,31,58,0.1);
  --shadow-lg:0 20px 44px rgba(11,31,58,0.16);
}

/* ============================================================
   RESET / BASE
   ============================================================ */
*, *::before, *::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font-base);
  color:var(--text-body);
  background:#fff;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
svg{ width:20px; height:20px; display:inline-block; vertical-align:middle; flex-shrink:0; }
a{ text-decoration:none; color:inherit; }
h1,h2,h3,h4,h5{
  color:var(--navy);
  font-weight:800;
  line-height:1.25;
  margin:0;
}
p{ margin:0; }
button{ font-family:inherit; cursor:pointer; }
ul,ol{ margin:0; padding:0; list-style:none; }

/* ============================================================
   LAYOUT HELPERS
   ============================================================ */
.container{
  max-width:var(--container-max);
  margin:0 auto;
  padding:0 24px;
}
.section{ padding:var(--space-xl) 0; }

@media (max-width:767px){
  .container{ padding:0 18px; }
}

/* ============================================================
   SHARED TEXT ELEMENTS
   ============================================================ */
.eyebrow{
  display:inline-block;
  width:fit-content;
  font-size:11.5px;
  font-weight:700;
  color:var(--brand-blue);
  background:rgba(46,111,242,0.08);
  padding:6px 14px;
  border-radius:var(--radius-pill);
  letter-spacing:.4px;
  text-transform:uppercase;
}
.text-gradient{
  background:var(--gradient-brand);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

/* ============================================================
   BUTTONS (shared across every page — do not restyle locally)
   ============================================================ */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-weight:700;
  font-size:14.5px;
  padding:13px 26px;
  border-radius:var(--radius-pill);
  border:none;
  cursor:pointer;
  text-decoration:none;
  white-space:nowrap;
  transition:transform var(--duration-base) var(--ease-out),
             box-shadow var(--duration-base) var(--ease-out),
             background var(--duration-base) var(--ease-out),
             color var(--duration-base) var(--ease-out),
             border-color var(--duration-base) var(--ease-out);
}
.btn svg{ width:16px; height:16px; transition:transform var(--duration-base) var(--ease-out); }
.btn:active{ transform:scale(0.97); }

.btn-lg{ padding:15px 30px; font-size:15px; }
.btn-sm{ padding:9px 18px; font-size:13px; }

.btn-primary{
  background:var(--gradient-brand);
  color:#fff;
  box-shadow:0 10px 24px rgba(46,111,242,0.28);
}
.btn-primary:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 32px rgba(46,111,242,0.36);
}

.btn-outline{
  background:#fff;
  color:var(--navy);
  border:1.5px solid var(--border-color);
}
.btn-outline:hover{
  border-color:var(--brand-blue);
  color:var(--brand-blue);
  transform:translateY(-2px);
}

.btn-white{
  background:#fff;
  color:var(--brand-blue);
  box-shadow:0 10px 24px rgba(0,0,0,0.16);
}
.btn-white:hover{
  background:var(--wa-green);
  color:#fff;
  transform:translateY(-2px);
  box-shadow:0 14px 30px rgba(37,211,102,0.32);
}

.btn:hover svg{ transform:translateX(3px); }

/* ============================================================
   HEADER
   ============================================================ */
.dc-header{
  position:sticky;
  top:0;
  z-index:100;
  background:#fff;
  border-bottom:1px solid var(--border-color);
  box-shadow:0 2px 10px rgba(11,31,58,0.04);
}
.dc-header-inner{
  max-width:var(--container-max);
  margin:0 auto;
  padding:0 24px;
  height:var(--header-h);
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.dc-logo{ display:flex; align-items:center; gap:10px; }
.dc-logo-img{ height:62px; width:auto; display:block; flex-shrink:0; }

.dc-nav-desktop{ display:flex; align-items:center; gap:4px; }
.dc-nav-link{
  display:flex; align-items:center; gap:7px;
  padding:9px 16px;
  border-radius:var(--radius-pill);
  font-size:14px; font-weight:600;
  color:var(--text-body);
  transition:background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}
.dc-nav-link svg{ width:17px; height:17px; flex-shrink:0; }
.dc-nav-link:hover{ background:rgba(46,111,242,0.06); color:var(--brand-blue); }
.dc-nav-link.active{ background:rgba(46,111,242,0.09); color:var(--brand-blue); }

.dc-header-actions{ display:flex; align-items:center; gap:10px; }

.dc-hamburger{
  display:none;
  width:40px; height:40px;
  border-radius:10px;
  border:1px solid var(--border-color);
  background:#fff;
  align-items:center; justify-content:center;
  position:relative;
  flex-shrink:0;
}
.dc-hamburger span{
  position:absolute;
  width:18px; height:2px;
  background:var(--navy);
  border-radius:2px;
  transition:transform var(--duration-base) var(--ease-out), opacity var(--duration-base) var(--ease-out), top var(--duration-base) var(--ease-out);
}
.dc-hamburger span:nth-child(1){ top:14px; }
.dc-hamburger span:nth-child(2){ top:20px; }
.dc-hamburger span:nth-child(3){ top:26px; }
.dc-hamburger.open span:nth-child(1){ top:20px; transform:rotate(45deg); }
.dc-hamburger.open span:nth-child(2){ opacity:0; }
.dc-hamburger.open span:nth-child(3){ top:20px; transform:rotate(-45deg); }

.dc-mobile-panel{
  display:none;
  position:absolute;
  top:100%; left:0; right:0;
  background:#fff;
  border-bottom:1px solid var(--border-color);
  box-shadow:var(--shadow-lg);
  max-height:0;
  overflow:hidden;
  transition:max-height var(--duration-slow) var(--ease-out);
  z-index:50;
}
.dc-mobile-panel.open{ max-height:520px; }
.dc-mobile-panel-inner{ padding:14px 20px 22px; }

.dc-mobile-link{
  display:flex; align-items:center; gap:12px;
  padding:13px 12px;
  border-radius:12px;
  font-size:15px; font-weight:600;
  color:var(--text-body);
  transition:background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}
.dc-mobile-link svg{ width:19px; height:19px; flex-shrink:0; }
.dc-mobile-link:hover{ background:rgba(46,111,242,0.06); }
.dc-mobile-link.active{ background:rgba(46,111,242,0.09); color:var(--brand-blue); }

.dc-mobile-actions{
  display:flex; gap:10px;
  margin-top:14px; padding-top:16px;
  border-top:1px solid var(--border-color);
}
.dc-mobile-actions .btn{ flex:1; }

@media (max-width:900px){
  .dc-nav-desktop{ display:none; }
  .dc-header-actions{ display:none; }
  .dc-hamburger{ display:flex; }
  .dc-mobile-panel{ display:block; }
}

/* ============================================================
   FOOTER
   ============================================================ */
.dc-footer{
  background:linear-gradient(160deg, #EAF1FC 0%, #F4F8FD 50%, #EEF6F2 100%);
  border-top:1px solid var(--border-color);
  padding:64px 24px 0;
}
.dc-footer-inner{ max-width:var(--container-max); margin:0 auto; }
.dc-footer-grid{
  display:grid;
  grid-template-columns:1.3fr 1fr 1fr 1fr;
  gap:40px;
  padding-bottom:44px;
}
.dc-footer-heading{
  font-size:16px; font-weight:800; color:var(--navy);
  margin-bottom:14px;
  position:relative;
  padding-bottom:10px;
  opacity:0;
  animation:dcFadeUp .5s var(--ease-out) forwards;
}
.dc-footer-heading::after{
  content:'';
  position:absolute; left:0; bottom:0;
  width:26px; height:3px;
  border-radius:3px;
  background:var(--teal);
  transform:scaleX(0);
  transform-origin:left;
  animation:dcUnderlineIn .5s var(--ease-out) .3s forwards;
}
@keyframes dcUnderlineIn{ to{ transform:scaleX(1); } }
.dc-footer-logo{ height:78px; width:auto; display:block; margin-bottom:14px; }
.dc-footer-desc{
  font-size:13.5px; color:var(--text-body);
  line-height:1.7;
  margin-bottom:20px;
  max-width:320px;
}
.dc-footer-social{ display:flex; gap:10px; }
.dc-footer-social a{
  width:38px; height:38px;
  border-radius:50%;
  background:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow-sm);
  opacity:0;
  transform:translateY(10px);
  animation:dcFadeUp .5s var(--ease-out) forwards;
  transition:transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out);
}
.dc-footer-social a:nth-child(1){ animation-delay:.1s; }
.dc-footer-social a:nth-child(2){ animation-delay:.16s; }
.dc-footer-social a:nth-child(3){ animation-delay:.22s; }
.dc-footer-social a:hover{ transform:translateY(-4px) scale(1.08) rotate(-6deg); box-shadow:var(--shadow-md); }
.dc-footer-social svg{ width:17px; height:17px; }

.dc-footer-links{ display:flex; flex-direction:column; gap:12px; }
.dc-footer-links a, .dc-footer-links span{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:13.5px; color:var(--text-body);
  width:fit-content;
  opacity:0;
  transform:translateX(-8px);
  animation:dcFooterLinkIn .5s var(--ease-out) forwards;
  transition:color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}
.dc-footer-links a:nth-child(1){ animation-delay:.05s; }
.dc-footer-links a:nth-child(2){ animation-delay:.1s; }
.dc-footer-links a:nth-child(3){ animation-delay:.15s; }
.dc-footer-links a:nth-child(4){ animation-delay:.2s; }
.dc-footer-links a:nth-child(5){ animation-delay:.25s; }
.dc-footer-links a:nth-child(6){ animation-delay:.3s; }
.dc-footer-links span{ animation-delay:.2s; }

.dc-footer-link-icon{
  width:18px; height:18px;
  color:var(--text-light);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.dc-footer-link-icon svg{ width:18px; height:18px; }

.dc-footer-links a:hover{ color:var(--brand-blue); transform:translateX(4px); }

@keyframes dcFooterLinkIn{
  to{ opacity:1; transform:translateX(0); }
}

.dc-footer-bottom{
  border-top:1px solid var(--border-color);
  padding:20px 0;
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:10px;
}
.dc-footer-copy, .dc-footer-powered{ font-size:12.5px; color:var(--text-light); white-space:nowrap; }
.dc-footer-powered strong{ color:var(--navy); font-weight:800; }

.dc-footer-col-toggle{ display:none; }

/* Always fully visible on every screen size — no collapse */
.dc-footer-col-body{ max-height:none; overflow:visible; }

@media (max-width:860px){
  .dc-footer{ padding:48px 18px 0; }
  .dc-footer-grid{ grid-template-columns:1fr; gap:0; padding-bottom:8px; }
  .dc-footer-brand{ padding-bottom:28px; }
  .dc-footer-col{ padding-bottom:22px; }
  .dc-footer-col-body{ padding:2px 0 4px; }
  .dc-footer-links{ gap:14px; }
  .dc-footer-bottom{ flex-direction:row; justify-content:space-between; padding:16px 0; }
  .dc-footer-copy, .dc-footer-powered{ font-size:11.5px; }
}

/* ============================================================
   FLOATING CONTACT MENU (site-wide, bottom-right)
   Same behavior on mobile & desktop: tap the main button to
   reveal 2 options — Talk to an Expert (WhatsApp) and
   Schedule a Demo Call (Calendly).
   ============================================================ */
.dc-float-wrap{
  position:fixed;
  right:20px;
  bottom:20px;
  z-index:200;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:12px;
}

.dc-float-contact{
  position:relative;
  width:58px; height:58px;
  border-radius:50%;
  border:none;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  background:var(--gradient-brand);
  color:#fff;
  box-shadow:0 10px 26px rgba(11,31,58,0.28);
  transition:transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out), background .3s var(--ease-out);
  flex-shrink:0;
}
.dc-float-contact:hover{
  transform:translateY(-4px) scale(1.06);
  box-shadow:0 16px 34px rgba(11,31,58,0.36);
}
.dc-float-contact svg{ width:26px; height:26px; }

/* Chat / close icon swap */
.dc-float-icon-close{ display:none; position:absolute; }
.dc-float-open .dc-float-toggle .dc-float-icon-chat{ display:none; }
.dc-float-open .dc-float-toggle .dc-float-icon-close{ display:block; }
.dc-float-open .dc-float-toggle{
  background:var(--navy);
  transform:rotate(0deg) scale(1.04);
}

/* Options menu — hidden by default, slides up when opened */
.dc-float-menu{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:10px;
  pointer-events:none;
}
.dc-float-option{
  display:flex;
  align-items:center;
  gap:10px;
  background:#fff;
  padding:10px 18px 10px 10px;
  border-radius:999px;
  box-shadow:0 10px 24px rgba(11,31,58,0.22);
  text-decoration:none;
  font-size:13.5px;
  font-weight:700;
  color:var(--navy);
  opacity:0;
  transform:translateY(14px) scale(0.9);
  transition:transform .3s var(--ease-out), opacity .25s var(--ease-out), box-shadow .3s var(--ease-out);
}
.dc-float-option:hover{
  transform:translateY(-2px) scale(1.03);
  box-shadow:0 14px 30px rgba(11,31,58,0.3);
}
.dc-float-option-icon{
  width:36px; height:36px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
  color:#fff;
}
.dc-float-option-icon svg{ width:18px; height:18px; }
.dc-float-option-whatsapp .dc-float-option-icon{ background:var(--wa-green); }
.dc-float-option-calendly .dc-float-option-icon{ background:linear-gradient(135deg, var(--brand-blue), var(--teal)); }
.dc-float-option-label{ white-space:nowrap; }

/* Open state: reveal the two options with a staggered pop-up */
.dc-float-open .dc-float-menu{ pointer-events:auto; }
.dc-float-open .dc-float-option{ opacity:1; transform:translateY(0) scale(1); }
.dc-float-open .dc-float-option-whatsapp{ transition-delay:.02s; }
.dc-float-open .dc-float-option-calendly{ transition-delay:.08s; }

@media (max-width:479px){
  .dc-float-wrap{ right:16px; bottom:16px; gap:10px; }
  .dc-float-contact{ width:54px; height:54px; }
  .dc-float-contact svg{ width:24px; height:24px; }
  .dc-float-option{ padding:9px 16px 9px 9px; font-size:13px; }
  .dc-float-option-icon{ width:32px; height:32px; }
}

/* Subtle pulse ring to draw attention while closed */
.dc-float-toggle::before{
  content:'';
  position:absolute;
  inset:0;
  border-radius:50%;
  box-shadow:0 0 0 0 rgba(46,111,242,0.5);
  animation:dcFloatPulse 2.6s ease-out infinite;
}
.dc-float-open .dc-float-toggle::before{ display:none; }
@keyframes dcFloatPulse{
  0%{ box-shadow:0 0 0 0 rgba(46,111,242,0.4); }
  70%{ box-shadow:0 0 0 14px rgba(46,111,242,0); }
  100%{ box-shadow:0 0 0 0 rgba(46,111,242,0); }
}

/* ============================================================
   SHARED UTILITY CLASSES
   ============================================================ */
.mb-0{ margin-bottom:0 !important; }
.reveal{
  animation:dcFadeIn var(--duration-slow) var(--ease-out) both;
}
.reveal[data-delay="1"]{ animation-delay:.05s; }
.reveal[data-delay="2"]{ animation-delay:.1s; }
.reveal[data-delay="3"]{ animation-delay:.15s; }
@keyframes dcFadeIn{
  from{ opacity:0; transform:translateY(14px); }
  to{ opacity:1; transform:translateY(0); }
}
@keyframes dcFadeUp{ to{ opacity:1; transform:translateY(0); } }