/* ==========================================================================
   HPWEBSOFT — GLOBAL DESIGN SYSTEM
   Paste the variables block into Elementor > Site Settings > Custom CSS,
   or keep it here — it's enqueued by functions.php on every page.
   ========================================================================== */

:root{
  /* ---- Brand colors ---- */
  --hp-navy:        #0A1128;   /* primary background / near-black navy */
  --hp-navy-light:  #101A3D;
  --hp-blue:        #2F5DFF;   /* electric / royal blue — primary accent */
  --hp-blue-light:  #5B7FFF;
  --hp-indigo:      #6C4CF1;   /* optional gradient partner */
  --hp-white:       #FFFFFF;
  --hp-off-white:   #F5F7FC;
  --hp-gray:        #8A93B3;   /* muted text on dark */
  --hp-gray-dark:   #4A5170;   /* muted text on light */
  --hp-success:     #23C08B;

  /* ---- Gradients ---- */
  --hp-gradient-primary: linear-gradient(135deg, var(--hp-blue) 0%, var(--hp-indigo) 100%);
  --hp-gradient-dark:    linear-gradient(180deg, var(--hp-navy) 0%, var(--hp-navy-light) 100%);
  --hp-gradient-glow:    radial-gradient(circle at 30% 20%, rgba(47,93,255,0.35), transparent 60%);

  /* ---- Typography ---- */
  --hp-font-heading: 'Sora', 'Poppins', sans-serif;
  --hp-font-body:    'Inter', 'Segoe UI', sans-serif;

  --hp-h1: clamp(2.25rem, 4.5vw + 1rem, 4rem);
  --hp-h2: clamp(1.75rem, 2.5vw + 1rem, 2.75rem);
  --hp-h3: clamp(1.25rem, 1.2vw + 1rem, 1.75rem);
  --hp-body: clamp(1rem, 0.3vw + 0.9rem, 1.125rem);

  /* ---- Spacing / radius / shadow ---- */
  --hp-radius-sm: 10px;
  --hp-radius-md: 18px;
  --hp-radius-lg: 28px;
  --hp-shadow-soft: 0 10px 40px rgba(10, 17, 40, 0.08);
  --hp-shadow-strong: 0 20px 60px rgba(10, 17, 40, 0.18);
  --hp-shadow-glow: 0 0 0 1px rgba(47,93,255,0.15), 0 20px 50px rgba(47,93,255,0.25);
  --hp-container: 1240px;
  --hp-section-y: clamp(60px, 8vw, 120px);
}

body{
  font-family: var(--hp-font-body);
  color: var(--hp-navy);
  background: var(--hp-white);
  font-size: var(--hp-body);
  line-height: 1.65;
}

h1,h2,h3,h4{
  font-family: var(--hp-font-heading);
  font-weight: 700;
  line-height: 1.15;
  margin: 0 0 0.5em;
  letter-spacing: -0.02em;
}
h1{ font-size: var(--hp-h1); }
h2{ font-size: var(--hp-h2); }
h3{ font-size: var(--hp-h3); }
p{ margin: 0 0 1em; color: var(--hp-gray-dark); }

.hp-container{
  max-width: var(--hp-container);
  margin: 0 auto;
  padding: 0 24px;
}
.hp-section{ padding: var(--hp-section-y) 0; }
.hp-section--dark{
  background: var(--hp-gradient-dark);
  color: var(--hp-white);
  position: relative;
  overflow: hidden;
}
.hp-section--dark::before{
  content:"";
  position:absolute; inset:0;
  background: var(--hp-gradient-glow);
  pointer-events:none;
}
.hp-section--dark p{ color: var(--hp-gray); }
.hp-section--dark h1, .hp-section--dark h2, .hp-section--dark h3{ color: var(--hp-white); }

.hp-eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size: 0.8rem; font-weight:600; letter-spacing:0.08em; text-transform:uppercase;
  color: var(--hp-blue);
  background: rgba(47,93,255,0.08);
  border: 1px solid rgba(47,93,255,0.2);
  padding: 6px 16px; border-radius: 999px;
  margin-bottom: 18px;
}
.hp-section--dark .hp-eyebrow{ color:#9db4ff; background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.14); }

.hp-text-center{ text-align:center; }
.hp-max-w{ max-width: 680px; margin-left:auto; margin-right:auto; }

/* ---- Buttons ---- */
.hp-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family: var(--hp-font-heading);
  font-weight:600; font-size:1rem;
  padding: 16px 32px;
  border-radius: 999px;
  border: none; cursor:pointer;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
  min-height: 48px; /* touch target */
}
.hp-btn--primary{
  background: var(--hp-gradient-primary);
  color: var(--hp-white);
  box-shadow: var(--hp-shadow-glow);
}
.hp-btn--primary:hover{ transform: translateY(-3px); box-shadow: 0 25px 55px rgba(47,93,255,0.35); }

.hp-btn--ghost{
  background: transparent;
  color: var(--hp-navy);
  border: 1.5px solid rgba(10,17,40,0.15);
}
.hp-section--dark .hp-btn--ghost{ color:#fff; border-color: rgba(255,255,255,0.25); }
.hp-btn--ghost:hover{ border-color: var(--hp-blue); color: var(--hp-blue); transform: translateY(-2px); }

.hp-btn--whatsapp{
  background: #25D366; color:#fff;
}
.hp-btn--whatsapp:hover{ transform: translateY(-3px); box-shadow: 0 15px 35px rgba(37,211,102,0.35); }

.hp-btn-row{ display:flex; flex-wrap:wrap; gap:16px; align-items:center; }

/* ---- Cards ---- */
.hp-card{
  background: var(--hp-white);
  border: 1px solid rgba(10,17,40,0.06);
  border-radius: var(--hp-radius-md);
  padding: 32px;
  box-shadow: var(--hp-shadow-soft);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.hp-card:hover{
  transform: translateY(-6px);
  box-shadow: var(--hp-shadow-strong);
  border-color: rgba(47,93,255,0.25);
}
.hp-card__icon{
  width:56px; height:56px; border-radius:16px;
  display:flex; align-items:center; justify-content:center;
  background: var(--hp-gradient-primary);
  color:#fff; font-size:1.5rem; margin-bottom:20px;
}
.hp-card__link{
  display:inline-flex; align-items:center; gap:6px;
  color: var(--hp-blue); font-weight:600; margin-top:8px;
}

/* ---- Glass card (glassmorphism, used sparingly on dark sections) ---- */
.hp-glass{
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: var(--hp-radius-md);
}

/* ---- Grids ---- */
.hp-grid{ display:grid; gap:28px; }
.hp-grid--2{ grid-template-columns: repeat(2, 1fr); }
.hp-grid--3{ grid-template-columns: repeat(3, 1fr); }
.hp-grid--4{ grid-template-columns: repeat(4, 1fr); }

/* ---- Header ---- */
.hp-header{
  position: sticky; top:0; z-index: 999;
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(10,17,40,0.06);
  transition: padding .3s ease, box-shadow .3s ease;
}
.hp-header.is-scrolled{ box-shadow: 0 8px 30px rgba(10,17,40,0.08); }
.hp-header__inner{
  display:flex; align-items:center; justify-content:space-between;
  padding: 20px 0; transition: padding .3s ease;
}
.hp-header.is-scrolled .hp-header__inner{ padding: 12px 0; }
.hp-logo{ font-family: var(--hp-font-heading); font-weight:800; font-size:1.4rem; color: var(--hp-navy); }
.hp-logo span{ color: var(--hp-blue); }
.hp-nav{ display:flex; gap:32px; align-items:center; }
.hp-nav a{ font-weight:600; font-size:0.95rem; color: var(--hp-navy); position:relative; }
.hp-nav a::after{
  content:""; position:absolute; left:0; bottom:-6px; width:0; height:2px;
  background: var(--hp-blue); transition: width .25s ease;
}
.hp-nav a:hover::after{ width:100%; }
.hp-header__cta{ display:flex; align-items:center; gap:12px; }
.hp-menu-toggle{ display:none; }

/* ---- Mobile menu ---- */
@media (max-width: 900px){
  .hp-nav{
    position:fixed; inset:0 0 0 30%;
    background: var(--hp-navy); flex-direction:column; justify-content:center;
    padding: 40px; transform: translateX(100%); transition: transform .35s ease;
  }
  .hp-nav.is-open{ transform: translateX(0); }
  .hp-nav a{ color:#fff; font-size:1.25rem; }
  .hp-menu-toggle{
    display:flex; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; z-index:1001;
  }
  .hp-menu-toggle span{ width:26px; height:2px; background: var(--hp-navy); border-radius:2px; }
  .hp-header__cta .hp-btn{ display:none; }
}

/* ---- Footer ---- */
.hp-footer{ background: var(--hp-navy); color: var(--hp-gray); padding: 80px 0 30px; }
.hp-footer h4{ color:#fff; font-size:1rem; margin-bottom:20px; }
.hp-footer a{ color: var(--hp-gray); display:block; margin-bottom:10px; transition: color .2s ease; }
.hp-footer a:hover{ color:#fff; }
.hp-footer__bottom{ border-top:1px solid rgba(255,255,255,0.08); margin-top:50px; padding-top:24px; font-size:0.85rem; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; }

/* ---- WhatsApp floating button ---- */
.hp-wa-float{
  position:fixed; right:24px; bottom:24px; z-index:998;
  width:60px; height:60px; border-radius:50%;
  background:#25D366; display:flex; align-items:center; justify-content:center;
  box-shadow: 0 12px 30px rgba(37,211,102,0.4);
  animation: hp-pulse 2.4s infinite;
}
@keyframes hp-pulse{
  0%{ box-shadow: 0 0 0 0 rgba(37,211,102,0.5); }
  70%{ box-shadow: 0 0 0 16px rgba(37,211,102,0); }
  100%{ box-shadow: 0 0 0 0 rgba(37,211,102,0); }
}

/* ---- Process timeline ---- */
.hp-process{ display:grid; grid-template-columns: repeat(5,1fr); gap:20px; }
.hp-process__step{ position:relative; padding-top:20px; }
.hp-process__num{
  font-family: var(--hp-font-heading); font-weight:800; font-size:2.5rem;
  background: var(--hp-gradient-primary); -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ---- Reveal-on-scroll (JS toggles .is-visible) ---- */
.hp-reveal{ opacity:0; transform: translateY(28px); transition: opacity .7s ease, transform .7s ease; }
.hp-reveal.is-visible{ opacity:1; transform: translateY(0); }

/* ---- Pricing ---- */
.hp-price-card{ text-align:center; position:relative; }
.hp-price-card--featured{ border:2px solid var(--hp-blue); transform: scale(1.03); }
.hp-price-card__badge{
  position:absolute; top:-14px; left:50%; transform:translateX(-50%);
  background: var(--hp-gradient-primary); color:#fff; font-size:0.75rem; font-weight:700;
  padding:6px 16px; border-radius:999px;
}
.hp-price{ font-family: var(--hp-font-heading); font-size:2.4rem; font-weight:800; margin:16px 0; }
.hp-price small{ font-size:0.95rem; color: var(--hp-gray-dark); font-weight:500; }
.hp-price-list{ list-style:none; padding:0; margin:0 0 24px; text-align:left; }
.hp-price-list li{ display:flex; gap:10px; margin-bottom:12px; align-items:flex-start; }
.hp-price-list li::before{ content:"✓"; color: var(--hp-success); font-weight:800; }

/* ---- Testimonials ---- */
.hp-testimonial{ padding:32px; }
.hp-stars{ color:#F5A623; letter-spacing:2px; margin-bottom:12px; }

/* ---- Counters ---- */
.hp-counter{ font-family: var(--hp-font-heading); font-size:2.75rem; font-weight:800; color: var(--hp-blue); }

/* ---- Responsive ---- */
@media (max-width: 1024px){
  .hp-grid--4{ grid-template-columns: repeat(2,1fr); }
  .hp-grid--3{ grid-template-columns: repeat(2,1fr); }
  .hp-process{ grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 640px){
  .hp-grid--2, .hp-grid--3, .hp-grid--4{ grid-template-columns: 1fr; }
  .hp-process{ grid-template-columns: 1fr; }
  .hp-price-card--featured{ transform:none; }
  .hp-btn{ width:100%; }
  .hp-btn-row{ flex-direction:column; align-items:stretch; }
}

/* =====================================================================
   ELEMENTOR STARTER SITE — visual layer
   ===================================================================== */
.elementor-page .hp-header{z-index:9999}
.hp-e-hero-section{background:radial-gradient(circle at 50% 0%,rgba(47,93,255,.22),transparent 42%),linear-gradient(180deg,#081027 0%,#0d1734 100%);color:#fff;overflow:hidden}
.hp-e-hero-section .elementor-container,.hp-e-inner-hero .elementor-container{min-height:650px;align-items:center}
.hp-e-hero-content{text-align:center}
.hp-e-eyebrow{display:inline-flex;align-items:center;padding:8px 15px;border:1px solid rgba(91,127,255,.35);border-radius:999px;background:rgba(91,127,255,.09);color:#a9bbff;font-size:12px;font-weight:800;letter-spacing:.12em;margin-bottom:18px}
.hp-e-hero-title,.hp-e-inner-title{color:#fff;font-size:clamp(42px,6vw,78px);line-height:1.02;letter-spacing:-.045em;margin-bottom:24px}
.hp-e-inner-title{font-size:clamp(38px,5vw,64px)}
.hp-e-gradient{background:linear-gradient(135deg,#6f8cff,#9b79ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.hp-e-hero-copy{max-width:760px;margin:0 auto 28px;color:#aeb8d4;font-size:19px;line-height:1.75}
.hp-e-trust{color:#9aa6c6!important;font-size:13px!important;margin-top:18px}
.hp-elementor-btn{display:inline-flex!important;margin:5px 8px 5px 0!important;padding:15px 25px!important;border-radius:999px!important;font-weight:700!important;text-decoration:none!important}
.hp-elementor-btn--primary .elementor-button{background:linear-gradient(135deg,#2f5dff,#6c4cf1)!important;color:#fff!important;box-shadow:0 15px 40px rgba(47,93,255,.28)}
.hp-elementor-btn--outline .elementor-button{background:transparent!important;color:#fff!important;border:1px solid rgba(255,255,255,.25)!important}
.hp-elementor-btn--whatsapp .elementor-button{background:#25d366!important;color:#fff!important}
.hp-elementor-btn--text .elementor-button{background:transparent!important;color:#2f5dff!important;padding-left:0!important}
.hp-e-stats-section{background:#f7f9fd;padding-top:0!important;padding-bottom:0!important}
.hp-e-stat{padding:35px 20px;border-right:1px solid #e6eaf3}
.hp-e-stat:last-child{border-right:0}.hp-e-stat-number{font-size:34px!important;color:#0a1128!important;margin:0!important}.hp-e-stat-label{margin:3px 0 0;text-align:center;color:#68718c!important;font-size:13px!important}
.hp-e-section-heading{padding-bottom:25px!important}.hp-e-section-intro{max-width:700px;margin:0 auto!important;text-align:center;font-size:17px}
.hp-e-card-grid .elementor-container{display:grid!important;grid-template-columns:repeat(3,1fr);gap:22px}
.hp-e-card-grid .elementor-column{width:auto!important}
.hp-e-card{background:#fff;border:1px solid #e9edf5;border-radius:22px;padding:8px!important;box-shadow:0 15px 50px rgba(10,17,40,.06);transition:.25s ease}
.hp-e-card:hover{transform:translateY(-7px);box-shadow:0 24px 70px rgba(10,17,40,.12);border-color:#cfd8ff}
.hp-e-card>.elementor-element-populated{padding:25px!important}
.hp-e-icon{width:52px;height:52px;border-radius:16px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#2f5dff,#6c4cf1);color:#fff;font-weight:800;font-size:13px;margin-bottom:18px}
.hp-e-card-title{font-size:21px!important}.hp-e-card-text p{font-size:15px!important}.hp-e-feature-panel,.hp-e-metric-panel,.hp-e-service-panel{border-radius:26px;background:linear-gradient(145deg,#0a1128,#15224a);color:#fff;padding:42px;box-shadow:0 25px 70px rgba(10,17,40,.18);min-height:300px;display:flex;flex-direction:column;justify-content:center}
.hp-e-feature-panel span,.hp-e-service-panel span,.hp-e-metric-panel small{color:#9fb3ff;font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}.hp-e-feature-panel strong,.hp-e-service-panel strong,.hp-e-metric-panel strong{font-size:30px;line-height:1.15;margin:8px 0}.hp-e-feature-panel small,.hp-e-service-panel small{color:#9ba8c7;font-size:14px}.hp-e-arrow{font-size:35px;color:#5f7cff;margin:15px 0}.hp-e-online{color:#61e0ac!important}.hp-e-metric-panel p{color:#aeb8d4}.hp-e-mini-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:20px}.hp-e-mini-grid span{padding:12px;border:1px solid rgba(255,255,255,.1);border-radius:12px;background:rgba(255,255,255,.04);color:#fff;font-size:13px;text-transform:none;letter-spacing:0}
.hp-e-process-section{background:#0a1128;color:#fff}.hp-e-process-section h2{color:#fff!important}.hp-e-process-section p{color:#aeb8d4!important}.hp-e-process{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-top:30px}.hp-e-process>div{padding:24px;border:1px solid rgba(255,255,255,.1);border-radius:18px;background:rgba(255,255,255,.035)}.hp-e-process b{display:block;color:#7f98ff;font-size:25px}.hp-e-process strong{display:block;color:#fff;margin:8px 0}.hp-e-process span{display:block;color:#9ca8c7;font-size:13px}
.hp-e-faq{max-width:850px;margin:25px auto}.hp-e-faq details{border-bottom:1px solid #e7ebf3;padding:20px 0}.hp-e-faq summary{cursor:pointer;font-weight:700;font-size:18px;color:#0a1128}.hp-e-faq p{padding:12px 0 0;margin:0}
.hp-e-cta-section{background:linear-gradient(135deg,#101a3d,#0a1128);color:#fff;border-radius:0}.hp-e-cta-section h2{color:#fff!important}.hp-e-cta-copy{color:#aeb8d4!important}.hp-e-cta-actions .elementor-widget-container{text-align:right}
.hp-e-inner-hero{background:linear-gradient(180deg,#0a1128,#101a3d);color:#fff}.hp-e-inner-section{background:#fff}.hp-e-inner-section.hp-e-alt{background:#f7f9fd}.hp-e-inner-section .elementor-icon-list-text{color:#39425e!important}.hp-e-service-panel{min-height:280px}.hp-e-service-panel strong{max-width:300px}.hp-e-inner-section .elementor-heading-title{letter-spacing:-.03em}
@media(max-width:900px){.hp-e-card-grid .elementor-container{grid-template-columns:1fr 1fr}.hp-e-process{grid-template-columns:1fr 1fr}.hp-e-stat{border-right:0;border-bottom:1px solid #e6eaf3}.hp-e-cta-actions .elementor-widget-container{text-align:left}}
@media(max-width:600px){.hp-e-hero-section .elementor-container,.hp-e-inner-hero .elementor-container{min-height:560px}.hp-e-card-grid .elementor-container{grid-template-columns:1fr}.hp-e-process{grid-template-columns:1fr}.hp-e-feature-panel,.hp-e-metric-panel,.hp-e-service-panel{padding:28px}.hp-e-hero-title{font-size:42px!important}.hp-e-hero-copy{font-size:16px}.hp-elementor-btn{width:100%;margin-right:0!important}.hp-e-stat{padding:25px 10px}}
.hp-e-contact-form-section{background:#f7f9fd}.hp-contact-form{max-width:900px;margin:35px auto 0;background:#fff;padding:32px;border-radius:24px;box-shadow:0 20px 60px rgba(10,17,40,.08);border:1px solid #e9edf5}.hp-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.hp-contact-form label{display:block;font-size:13px;font-weight:700;color:#26304c;margin-bottom:18px}.hp-contact-form input,.hp-contact-form select,.hp-contact-form textarea{display:block;width:100%;margin-top:8px;padding:14px 15px;border:1px solid #dfe4ef;border-radius:12px;background:#fff;color:#0a1128;font:inherit;outline:none}.hp-contact-form input:focus,.hp-contact-form select:focus,.hp-contact-form textarea:focus{border-color:#2f5dff;box-shadow:0 0 0 3px rgba(47,93,255,.1)}.hp-form-submit{border:0;border-radius:999px;padding:15px 26px;background:linear-gradient(135deg,#2f5dff,#6c4cf1);color:#fff;font-weight:800;cursor:pointer}.hp-contact-success{max-width:900px;margin:0 auto 20px;padding:16px 20px;border-radius:14px;background:#eafaf3;color:#146c4c;font-weight:700}@media(max-width:600px){.hp-form-grid{grid-template-columns:1fr}.hp-contact-form{padding:22px}}
.hp-e-site-header{position:sticky;top:0;z-index:9999;background:rgba(255,255,255,.92);backdrop-filter:blur(14px);border-bottom:1px solid #e8ecf4;padding:12px 0!important}.hp-e-site-header .elementor-container{align-items:center}.hp-e-logo{font-family:var(--hp-font-heading);font-size:24px;font-weight:800;color:#0a1128!important}.hp-e-logo span{color:#2f5dff}.hp-e-nav{display:flex;justify-content:center;gap:26px;flex-wrap:wrap}.hp-e-nav a{font-size:14px;font-weight:700;color:#1b2440!important}.hp-e-nav a:hover{color:#2f5dff!important}.hp-e-header-cta{text-align:right}.hp-e-site-footer{background:#0a1128!important;color:#9ba8c7;padding:70px 0 0!important}.hp-e-site-footer .elementor-heading-title{color:#fff!important}.hp-e-site-footer p,.hp-e-site-footer a{color:#9ba8c7!important;font-size:14px}.hp-e-site-footer a{display:block;margin-bottom:8px}.hp-e-site-footer a:hover{color:#fff!important}.hp-e-logo-footer{color:#fff!important}.hp-e-footer-bottom-col{border-top:1px solid rgba(255,255,255,.09);margin-top:35px;padding-top:22px;padding-bottom:22px}.hp-e-footer-bottom{text-align:center;font-size:13px;color:#76829f}.hp-e-site-footer .elementor-container{row-gap:20px}
@media(max-width:900px){.hp-e-header-nav{display:none}.hp-e-header-cta{text-align:right}.hp-e-site-header .elementor-column{width:auto!important}.hp-e-site-header .elementor-container{justify-content:space-between}.hp-e-nav{gap:14px}.hp-e-site-footer .elementor-column{width:50%!important}}
@media(max-width:600px){.hp-e-site-footer .elementor-column{width:100%!important}.hp-e-site-footer{padding-top:50px!important}}