/* ================================================================
   HOME PAGE – ENHANCED STYLES
   ================================================================ */

/* ---- HERO ---- */
.hero-modern {
  background: linear-gradient(135deg, #0f0c29 0%, #302b63 55%, #1a1a4e 100%);
  min-height: 92vh;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.hero-modern::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.045) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
}
@keyframes float    { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-18px)} }
@keyframes pulse-glow{ 0%,100%{opacity:.7;transform:scale(1)} 50%{opacity:1;transform:scale(1.05)} }
@keyframes fade-in-up{ from{opacity:0;transform:translateY(28px)} to{opacity:1;transform:translateY(0)} }

.hero-content   { position:relative; z-index:2; }
.hero-badge .badge { backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,.2); }
.hero-title     { color:#fff; text-shadow:0 2px 24px rgba(0,0,0,.35); }
.hero-subtitle  { color:rgba(255,255,255,.82); }
.floating-icon  { animation:float 3s ease-in-out infinite; will-change:transform; display:inline-block; }

.trust-badge { color:rgba(255,255,255,.6); font-size:.875rem; display:flex; align-items:center; gap:.5rem; }

/* ---- SERVICES ---- */
.services-section { padding:80px 0; background:#fff; }
.services-section .section-badge { background:rgba(255,107,53,.1); color:#ff6b35; }

/* ---- CUSTOM PROJECTS ---- */
.custom-projects-section {
  background:linear-gradient(135deg,#4A00E0,#8E2DE2,#F27121);
  padding:80px 0; color:#fff; position:relative; overflow:hidden;
}
.custom-projects-section::before {
  content:''; position:absolute; inset:0;
  background-image:radial-gradient(rgba(255,255,255,.06) 1px,transparent 1px);
  background-size:32px 32px; pointer-events:none;
}
.custom-feature-card {
  background:rgba(255,255,255,.12); backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.22); border-radius:18px;
  padding:1.75rem; height:100%;
  transition:background .3s, transform .3s;
}
.custom-feature-card:hover { background:rgba(255,255,255,.22); transform:translateY(-5px); }
.custom-feature-card .cf-icon {
  width:44px; height:44px; border-radius:12px;
  background:rgba(255,255,255,.2); display:flex; align-items:center;
  justify-content:center; font-size:1.2rem; margin-bottom:.9rem;
}

/* ---- SOLUTIONS ---- */
.solutions-section {
  background:linear-gradient(160deg,#f0f4ff 0%,#fff 60%,#f8f0ff 100%);
  padding:80px 0; position:relative; overflow:hidden;
}
.solutions-section::before {
  content:''; position:absolute; top:-120px; right:-120px;
  width:400px; height:400px; border-radius:50%;
  background:radial-gradient(circle,rgba(99,102,241,.08),transparent 70%); pointer-events:none;
}
.solutions-section::after {
  content:''; position:absolute; bottom:-80px; left:-80px;
  width:300px; height:300px; border-radius:50%;
  background:radial-gradient(circle,rgba(255,107,53,.07),transparent 70%); pointer-events:none;
}
.solution-card {
  background:#fff; border-radius:20px; padding:2.5rem 2rem; height:100%;
  position:relative; overflow:hidden;
  box-shadow:0 4px 24px rgba(0,0,0,.07); border:1px solid rgba(0,0,0,.06);
  transition:transform .35s, box-shadow .35s;
}
.solution-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:4px;
  border-radius:20px 20px 0 0;
  background:var(--card-accent,linear-gradient(90deg,#6366f1,#8b5cf6));
}
.solution-card:hover { transform:translateY(-8px); box-shadow:0 16px 48px rgba(0,0,0,.13); }
.solution-card .card-icon-wrap {
  width:72px; height:72px; border-radius:18px;
  display:flex; align-items:center; justify-content:center;
  font-size:2rem; margin-bottom:1.25rem; transition:transform .3s;
}
.solution-card:hover .card-icon-wrap { transform:scale(1.1) rotate(-4deg); }
.solution-card h3 { font-size:1.3rem; font-weight:700; color:#0d1b2a; margin-bottom:.75rem; }
.solution-card p  { color:#5a6a7a; font-size:.975rem; line-height:1.75; margin-bottom:1.5rem; }
.solution-card .card-bullets { list-style:none; padding:0; margin:0; }
.solution-card .card-bullets li {
  font-size:.9rem; color:#374151; padding:.3rem 0;
  display:flex; align-items:center; gap:.5rem;
}
.solution-card .card-bullets li::before {
  content:''; width:7px; height:7px; border-radius:50%; flex-shrink:0;
  background:var(--bullet-color,#6366f1);
}

/* ---- KEY FEATURES ---- */
.features-section {
  background:linear-gradient(180deg,#f8faff 0%,#eef2ff 100%);
  padding:80px 0;
}
.feature-icon-card {
  background:#fff; border-radius:20px; padding:2rem 1.5rem; text-align:center;
  box-shadow:0 2px 16px rgba(99,102,241,.08); border:1px solid rgba(99,102,241,.1);
  transition:transform .3s, box-shadow .3s; height:100%;
}
.feature-icon-card:hover { transform:translateY(-6px); box-shadow:0 12px 32px rgba(99,102,241,.16); }
.feature-icon-card .fi-icon {
  width:64px; height:64px; border-radius:16px;
  display:flex; align-items:center; justify-content:center;
  font-size:1.75rem; margin:0 auto 1rem;
}
.feature-icon-card h3 { font-size:1.1rem; font-weight:700; color:#0d1b2a; margin-bottom:.5rem; }
.feature-icon-card p  { font-size:.9rem; color:#64748b; margin:0; line-height:1.6; }

/* ---- MILESTONES ---- */
.milestones-section { background:#fff; padding:80px 0; }
.milestone-card {
  background:linear-gradient(135deg,#f8faff,#fff); border-radius:18px;
  padding:1.75rem 1.25rem; text-align:center;
  border:1px solid rgba(99,102,241,.1); box-shadow:0 2px 12px rgba(0,0,0,.05);
  height:100%; transition:transform .3s, box-shadow .3s;
}
.milestone-card:hover { transform:translateY(-5px); box-shadow:0 8px 28px rgba(0,0,0,.1); }
.milestone-card .ms-num {
  font-size:.7rem; font-weight:700; letter-spacing:.1em;
  color:#a0aec0; text-transform:uppercase; margin-bottom:.75rem;
}
.milestone-step-icon {
  width:58px; height:58px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:1.4rem; margin:0 auto .9rem;
}
.milestone-card h3 { font-size:1rem; font-weight:700; color:#0d1b2a; margin-bottom:.4rem; }
.milestone-card p  { font-size:.875rem; color:#64748b; margin:0; line-height:1.6; }

/* ---- APP ---- */
.app-section {
  background:linear-gradient(135deg,#1d3557,#457b9d);
  padding:80px 0; color:#fff; position:relative; overflow:hidden;
}
.app-section::before {
  content:''; position:absolute; inset:0;
  background-image:radial-gradient(rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:32px 32px; pointer-events:none;
}

/* ---- CONTACT ---- */
.contact-section { background:linear-gradient(180deg,#f0f4ff 0%,#fff 40%); padding:80px 0; }
.contact-form-wrapper {
  background:#fff; border-radius:24px; padding:3rem;
  box-shadow:0 8px 48px rgba(0,0,0,.08); border:1px solid rgba(0,0,0,.06);
}

/* ---- SHARED ---- */
.section-pill {
  display:inline-flex; align-items:center; gap:.35rem;
  border-radius:50px; padding:.35rem .9rem;
  font-size:.8rem; font-weight:600; letter-spacing:.05em;
  margin-bottom:1rem;
}

@media(max-width:768px){
  .hero-modern { min-height:80vh; }
  .hero-title  { font-size:2rem!important; line-height:1.2; }
  .hero-subtitle{ font-size:1rem!important; }
  .contact-form-wrapper{ padding:1.5rem; }
}

/* CTA button hover helpers – replaces inline onmouseover */
/* ================================================================
   HOME PAGE VISUAL REFINEMENT
   Presentation-only overrides; behavior and document structure stay intact.
   ================================================================ */
:root {
  --home-ink: #0b1220;
  --home-muted: #64748b;
  --home-line: rgba(148,163,184,.2);
  --home-orange: #f97316;
  --home-violet: #6d28d9;
}

.hero-modern,
.services-section,
.custom-projects-section,
.solutions-section,
.features-section,
.milestones-section,
.app-section,
.contact-section { isolation: isolate; }

.product-showcase,
.custom-projects-section,
.solutions-section,
.features-section,
.milestones-section,
.app-section,
.contact-section {
  content-visibility: auto;
  contain-intrinsic-size: auto 760px;
}

.hero-modern {
  min-height: min(840px, calc(100svh - 72px));
  padding: 4.5rem 1rem;
  background:
    radial-gradient(circle at 18% 24%, rgba(124,58,237,.42), transparent 30rem),
    radial-gradient(circle at 82% 72%, rgba(249,115,22,.25), transparent 28rem),
    linear-gradient(135deg, #070b1a 0%, #17143d 48%, #25205f 100%);
}
.hero-modern::before {
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 52px 52px;
  opacity: .75;
}
.hero-content { max-width: 1040px; }
.hero-badge .badge {
  padding: .65rem 1rem !important;
  background: rgba(255,255,255,.08) !important;
  border-color: rgba(255,255,255,.16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 12px 36px rgba(0,0,0,.15);
  letter-spacing: .025em;
}
.hero-title {
  max-width: 980px;
  margin-inline: auto;
  font-size: clamp(2.5rem, 5.5vw, 4.5rem) !important;
  line-height: .98 !important;
  letter-spacing: -.06em;
  text-wrap: balance;
}
.hero-title span { padding-bottom: .08em; }
.hero-subtitle {
  max-width: 760px !important;
  font-size: clamp(1.05rem, 1.7vw, 1.28rem) !important;
  line-height: 1.75;
  text-wrap: balance;
}
.hero-cta .btn {
  min-width: 210px;
}
.trust-badge {
  padding: .6rem .85rem;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 999px;
  color: rgba(255,255,255,.76);
  background: rgba(255,255,255,.045);
  backdrop-filter: blur(10px);
}

.services-section {
  padding: clamp(5rem,8vw,7rem) 0;
  background:
    radial-gradient(circle at 90% 5%, rgba(249,115,22,.09), transparent 24rem),
    #fff;
}
.services-title,
.solutions-section h2,
.features-section > .container > .text-center h2,
.milestones-section h2,
.contact-section h2 {
  color: var(--home-ink) !important;
  font-size: clamp(2rem,3.8vw,3rem) !important;
  font-weight: 800 !important;
  letter-spacing: -.045em;
  line-height: 1.08;
  text-wrap: balance;
}
.services-subtitle,
.solutions-section .text-secondary,
.features-section > .container > .text-center .text-muted,
.milestones-section > .container > .text-center .text-muted,
.contact-section .lead { color: var(--home-muted) !important; }
.service-card {
  position: relative;
  overflow: hidden;
  padding: 2.25rem;
  border: 1px solid var(--home-line);
  border-radius: 24px;
  box-shadow: 0 16px 45px rgba(15,23,42,.07);
}
.service-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: linear-gradient(90deg,#6366f1,#8b5cf6);
}
.services-section .col-lg-4:nth-child(2) .service-card::before { background: linear-gradient(90deg,#0ea5e9,#14b8a6); }
.services-section .col-lg-4:nth-child(3) .service-card::before { background: linear-gradient(90deg,#f97316,#f43f5e); }
.service-card:hover { transform: translateY(-9px); box-shadow: 0 25px 60px rgba(15,23,42,.13); }
.service-card .icon-circle {
  width: 66px;
  height: 66px;
  border-radius: 18px;
  background: linear-gradient(135deg,#eef2ff,#e0e7ff);
  box-shadow: inset 0 0 0 1px rgba(99,102,241,.1);
}
.services-section .col-lg-4:nth-child(2) .icon-circle { color:#0891b2; background:linear-gradient(135deg,#ecfeff,#ccfbf1); }
.services-section .col-lg-4:nth-child(3) .icon-circle { color:#ea580c; background:linear-gradient(135deg,#fff7ed,#ffe4e6); }
.service-title { color:var(--home-ink); font-size:1.35rem; font-weight:800; letter-spacing:-.025em; }
.service-desc { color:var(--home-muted); line-height:1.75; }
.custom-projects-section {
  padding: clamp(5rem,8vw,7rem) 0;
  background:
    radial-gradient(circle at 15% 10%,rgba(249,115,22,.4),transparent 24rem),
    radial-gradient(circle at 88% 82%,rgba(59,130,246,.3),transparent 25rem),
    linear-gradient(135deg,#27105a 0%,#5b21b6 48%,#9d174d 100%);
}
.custom-projects-section::before { background-size: 44px 44px; opacity:.65; }
.custom-projects-section h2 { font-size:clamp(2.25rem,4.5vw,3.75rem) !important; letter-spacing:-.045em; text-wrap:balance; }
.custom-feature-card {
  padding: 1.8rem;
  border-color: rgba(255,255,255,.18);
  border-radius: 22px;
  background: linear-gradient(145deg,rgba(255,255,255,.14),rgba(255,255,255,.07));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.13), 0 20px 45px rgba(24,8,54,.2);
}
.custom-feature-card:hover { transform:translateY(-7px); background:linear-gradient(145deg,rgba(255,255,255,.2),rgba(255,255,255,.1)); }
.custom-feature-card .cf-icon { width:50px; height:50px; border-radius:15px; box-shadow:inset 0 1px 0 rgba(255,255,255,.18); }
.custom-feature-card h3 { font-size:1.15rem; letter-spacing:-.02em; }

.solutions-section { padding:clamp(5rem,8vw,7rem) 0; }
.solution-card { padding:2.35rem 2rem; border-radius:24px; box-shadow:0 16px 48px rgba(15,23,42,.07); }
.solution-card::before { height:5px; }
.solution-card:hover { transform:translateY(-9px); box-shadow:0 28px 65px rgba(15,23,42,.13); }
.solution-card .card-icon-wrap { box-shadow:inset 0 0 0 1px currentColor; }
.solution-card h3 { font-size:1.35rem; letter-spacing:-.025em; }
.solution-card p { color:var(--home-muted); }
.solution-card .card-bullets li { padding:.42rem 0; }

.features-section {
  padding:clamp(5rem,8vw,7rem) 0;
  background:
    radial-gradient(circle at 5% 60%,rgba(99,102,241,.1),transparent 25rem),
    linear-gradient(180deg,#f8faff 0%,#eef2ff 100%);
}
.feature-icon-card { padding:2.1rem 1.4rem; border-radius:22px; box-shadow:0 14px 38px rgba(67,56,202,.07); }
.feature-icon-card:hover { transform:translateY(-8px); box-shadow:0 24px 50px rgba(67,56,202,.14); }
.feature-icon-card .fi-icon { border-radius:18px; box-shadow:inset 0 0 0 1px rgba(15,23,42,.04); }
.features-section .row.g-4.mb-2 > div > div {
  border-top:1px solid rgba(148,163,184,.14);
  border-right:1px solid rgba(148,163,184,.14);
  border-bottom:1px solid rgba(148,163,184,.14);
  box-shadow:0 13px 36px rgba(15,23,42,.06) !important;
  transition:transform .3s ease,box-shadow .3s ease;
}
.features-section .row.g-4.mb-2 > div > div:hover { transform:translateY(-6px); box-shadow:0 22px 46px rgba(15,23,42,.11) !important; }

.milestones-section {
  padding:clamp(5rem,8vw,7rem) 0;
  background:linear-gradient(180deg,#fff,#fafbff);
}
.milestone-card { padding:1.8rem 1.1rem; border-radius:20px; box-shadow:0 13px 34px rgba(15,23,42,.055); }
.milestone-card:hover { transform:translateY(-7px); box-shadow:0 22px 45px rgba(15,23,42,.1); }
.milestone-card .ms-num { display:inline-block; padding:.3rem .55rem; border-radius:999px; background:#f1f5f9; color:#64748b; }
.milestone-step-icon { width:62px; height:62px; box-shadow:inset 0 0 0 1px rgba(15,23,42,.05); }
.milestone-card h3 { font-size:1.08rem; letter-spacing:-.02em; }

.app-section {
  padding:clamp(5rem,8vw,7rem) 0;
  background:
    radial-gradient(circle at 75% 40%,rgba(56,189,248,.22),transparent 25rem),
    radial-gradient(circle at 10% 90%,rgba(168,85,247,.28),transparent 24rem),
    linear-gradient(135deg,#081427,#13264a 55%,#243b6b);
}
.app-section::before { background-size:46px 46px; opacity:.55; }
.app-section h2 { font-size:clamp(2.25rem,4.5vw,3.75rem) !important; letter-spacing:-.045em; line-height:1.05; }
.app-section ul li { display:flex; align-items:center; padding:.28rem 0; }
.app-section a img { transition:transform .25s ease,filter .25s ease; filter:drop-shadow(0 12px 20px rgba(0,0,0,.25)); }
.app-section a:hover img { transform:translateY(-4px); filter:drop-shadow(0 16px 25px rgba(0,0,0,.35)); }
.app-section .col-md-6.position-relative::before {
  content:"";
  position:absolute;
  width:300px;
  height:300px;
  top:42px;
  left:50%;
  transform:translateX(-50%);
  border:1px solid rgba(255,255,255,.13);
  border-radius:50%;
  background:rgba(255,255,255,.045);
  box-shadow:0 0 80px rgba(56,189,248,.14);
}
.app-section .col-md-6.position-relative > img { border:1px solid rgba(255,255,255,.18); }

.contact-section {
  padding:clamp(5rem,8vw,7rem) 0;
  background:
    radial-gradient(circle at 8% 10%,rgba(124,58,237,.14),transparent 27rem),
    radial-gradient(circle at 94% 88%,rgba(249,115,22,.12),transparent 25rem),
    linear-gradient(145deg,#f5f3ff 0%,#ffffff 52%,#fff7ed 100%);
  position:relative;
  overflow:hidden;
}
.contact-section::before {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.72;
  background-image:
    linear-gradient(rgba(100,116,139,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(100,116,139,.055) 1px,transparent 1px);
  background-size:48px 48px;
  mask-image:linear-gradient(to bottom,black,transparent 82%);
}
.contact-section::after {
  content:"";
  position:absolute;
  width:460px;
  height:460px;
  right:-260px;
  top:-220px;
  border:1px solid rgba(124,58,237,.09);
  border-radius:50%;
  box-shadow:0 0 0 75px rgba(124,58,237,.025),0 0 0 150px rgba(249,115,22,.018);
  pointer-events:none;
}
.contact-section > .container { position:relative; z-index:1; }
.contact-section > .container > .text-center { margin-bottom:clamp(2rem,5vw,3.5rem) !important; }
.contact-section > .container > .text-center .section-pill {
  color:#6d28d9 !important;
  border-color:rgba(124,58,237,.2);
  background:rgba(255,255,255,.76) !important;
  box-shadow:inset 0 1px 0 #fff,0 10px 30px rgba(76,29,149,.08);
  backdrop-filter:blur(12px);
}
.contact-section h2 {
  color:var(--home-ink) !important;
  font-size:clamp(2.25rem,4.5vw,3.75rem) !important;
  text-shadow:none;
}
.contact-section .lead {
  max-width:650px;
  margin-inline:auto;
  color:var(--home-muted) !important;
  font-size:clamp(1rem,1.7vw,1.2rem);
  line-height:1.7;
  text-wrap:balance;
}
.contact-form-wrapper {
  padding:clamp(1.5rem,4vw,3.25rem);
  position:relative;
  overflow:hidden;
  border:1px solid rgba(148,163,184,.2);
  border-radius:30px;
  background:linear-gradient(145deg,rgba(255,255,255,.99),rgba(248,250,252,.96));
  box-shadow:0 35px 90px rgba(76,29,149,.14),0 10px 28px rgba(15,23,42,.06),inset 0 1px 0 #fff;
}
.contact-form-wrapper::before {
  content:"";
  position:absolute;
  inset:0 0 auto;
  height:5px;
  background:linear-gradient(90deg,#8b5cf6,#ec4899,#f97316);
}
.contact-form-wrapper::after {
  content:"";
  position:absolute;
  width:180px;
  height:180px;
  right:-95px;
  bottom:-105px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(124,58,237,.09),transparent 70%);
  pointer-events:none;
}
.contact-form-wrapper form { position:relative; z-index:1; }
.contact-form-wrapper .form-label {
  margin-bottom:.55rem;
  color:#243047;
  font-size:.88rem;
  letter-spacing:.025em;
}
.contact-form-wrapper textarea.form-control { min-height:100%; resize:vertical; }
#contact-messages .alert {
  border:1px solid rgba(255,255,255,.5);
  border-radius:16px;
  box-shadow:0 16px 40px rgba(0,0,0,.18);
}
#contact-submit-btn {
  min-width:230px;
  border:0;
  background:linear-gradient(120deg,#7c3aed,#db2777 56%,#f97316);
  background-size:160% 100%;
  box-shadow:0 16px 36px rgba(124,58,237,.25),inset 0 1px 0 rgba(255,255,255,.22);
  transition:transform .25s ease,box-shadow .25s ease;
}
#contact-submit-btn:hover:not(:disabled) {
  transform:translateY(-3px);
  background-position:100% 0;
  box-shadow:0 21px 44px rgba(219,39,119,.34),inset 0 1px 0 rgba(255,255,255,.22);
}
#contact-submit-btn:focus-visible { outline:3px solid rgba(216,180,254,.8); outline-offset:4px; }
#contact-submit-btn:disabled { opacity:.7; cursor:wait; }

.section-pill {
  padding:.5rem .85rem;
  border:1px solid currentColor;
  box-shadow:0 8px 24px rgba(15,23,42,.05);
  font-weight:800;
  letter-spacing:.07em;
  text-transform:uppercase;
}

@media (max-width: 991.98px) {
  .hero-modern {
    min-height: calc(100svh - 64px);
    padding: 4rem 1rem;
  }
  .app-section .col-md-6.position-relative::before { width:260px; height:260px; }
}
@media (max-width: 767.98px) {
  .hero-modern { padding-bottom:5.5rem; }
  .hero-title { letter-spacing:-.045em; }
  .hero-cta .btn { width:100%; }
  .trust-badge { font-size:.78rem; }
  .service-card,.solution-card { padding:1.75rem; }
  .features-section .col-6 { width:100%; }
  .app-section { text-align:center; }
  .app-section ul { display:inline-block; text-align:left; }
  .app-section .d-flex.flex-wrap.gap-3 { justify-content:center; }
  .contact-section::after { display:none; }
  .contact-form-wrapper { border-radius:24px; }
  .contact-form-wrapper textarea.form-control { min-height:170px; }
}
@media (max-width: 420px) {
  .hero-title { font-size:2.45rem !important; }
  .hero-content { padding-inline:.15rem; }
  .trust-badge { width:calc(50% - .75rem); justify-content:center; text-align:center; }
  .custom-feature-card { padding:1.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-content,.hero-badge,.hero-title,.hero-subtitle,.hero-cta,.floating-icon {
    animation:none !important;
  }
  .service-card,.custom-feature-card,.solution-card,.feature-icon-card,.milestone-card,
  .features-section .row.g-4.mb-2 > div > div,.app-section a img,#contact-submit-btn {
    transition:none !important;
  }
}