/* =====================================================================
   Softcare Application Pvt Ltd — custom design layer (brand: Appsoware)
   Works alongside the Tailwind CDN build.

   THEME: "Aurora Indigo"  (visual refresh — v4)
   ---------------------------------------------------------------------
   Only COLOR values were changed from the original. Every layout rule,
   size, spacing, animation, transition and selector is byte-for-byte
   the same, so the HTML structure and content flow are untouched.

   All theme colors flow from the design tokens in :root below. Change a
   token there (and the matching value in each page's tailwind.config
   `colors` block) to re-skin the whole site. Every contrast pairing in
   use meets WCAG 2.1 AA (>=4.5:1 for text; verified).
===================================================================== */

:root{
  /* ---- CORE DARK / TEXT ------------------------------------------------
     --ink   : primary text color on light backgrounds + darkest base.
     --navy  : rich indigo used for dark hero / footer / feature panels.
     --navy-2: lighter indigo, used as the top stop of the navy gradient. */
  --ink:#0A1233; --navy:#141C52; --navy-2:#1D2870;

  /* ---- PRIMARY (indigo) & SECONDARY (cyan) ----------------------------
     --sky   : bright cyan — decorative icons/accents on DARK sections.
     --blue  : PRIMARY brand color — links, labels, icon tiles, buttons.
     --blue-2: lighter indigo — top stop of the primary-blue gradient. */
  --sky:#38BDF8; --blue:#4F46E5; --blue-2:#574FE6;

  /* ---- ACCENT "flare" (warm) ------------------------------------------
     Decorative warm ramp for text-gradients, the signature underline,
     status dots and glows. Kept vivid & logo-friendly (amber->rose).
     NOTE: solid CTA buttons use the deeper --cta-* ramp below so white
     button text stays AA-compliant across the whole gradient. */
  --flare-1:#FB923C; --flare-2:#F97316; --flare-3:#F43F5E;

  /* --warm : light warm label color for use on DARK backgrounds. */
  --warm:#FDBA74;

  /* --cta-* : accessible warm-orange -> rose ramp for the primary CTA
     button fill (white label >=4.5:1 on every stop). */
  --cta-1:#D14318; --cta-2:#D9256B; --cta-3:#BE123C;

  /* --soft : app background / light section & card tint (indigo-tinted). */
  --soft:#F3F4FD;
}

html{ scroll-behavior:smooth; }
body{ font-family:'Inter',sans-serif; color:var(--ink); background:var(--soft); }
h1,h2,h3,h4,.font-display{ font-family:'Poppins',sans-serif; }
::selection{ background:var(--blue); color:#fff; }
.scroll-marker{ scroll-margin-top:132px; }
@media (max-width:640px){ .scroll-marker{ scroll-margin-top:104px; } }

/* ---------------- brand gradients ----------------
   .bg-brand-blue  -> primary indigo gradient (icon tiles, blue buttons)
   .bg-brand-navy  -> dark indigo radial for hero / footer / panels
   .bg-brand-flare -> warm CTA button fill (accessible orange->rose)
   .bg-soft        -> light section background                          */
.bg-brand-blue{ background:linear-gradient(135deg,#574FE6 0%,#4F46E5 55%,#3730A3 100%); }
.bg-brand-navy{ background:radial-gradient(ellipse 120% 90% at 50% -10%,#1D2870 0%,#141C52 45%,#070C24 100%); }
.bg-brand-flare{ background:linear-gradient(100deg,#D14318 0%,#D9256B 55%,#BE123C 100%); }
.bg-soft{ background:var(--soft); }

/* ---------------- text gradients ----------------
   Used on large display headings only; on dark hero the warm ramp and
   on light/dark the cyan->indigo ramp both read with high contrast.   */
.text-gradient-flare{
  background:linear-gradient(100deg,#FDBA74 0%,#F97316 45%,#F43F5E 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.text-gradient-blue{
  background:linear-gradient(100deg,#7DD3FC 0%,#6366F1 60%,#4F46E5 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
/* animated sheen version for headline words */
.text-gradient-animate{
  background:linear-gradient(100deg,#FDBA74,#F97316,#F43F5E,#F97316,#FDBA74);
  background-size:250% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:gradient-pan 6s linear infinite;
}
@keyframes gradient-pan{ 0%{background-position:0% 50%} 100%{background-position:250% 50%} }

/* ---------------- signature "flare" underline (echoes logo swoosh) ---------------- */
.flare-underline{ position:relative; display:inline-block; }
.flare-underline::after{
  content:''; position:absolute; left:2px; right:2px; bottom:-10px; height:7px;
  background:linear-gradient(100deg,#FB923C,#F97316 50%,#F43F5E);
  border-radius:999px; transform:skewX(-18deg);
  box-shadow:0 6px 18px -4px rgba(244,63,94,.55); /* rose glow */
}

/* ---------------- hero atmosphere ----------------
   Aurora blobs recolored to indigo (cool) + orange (warm) to sit over
   the new dark-indigo hero.                                            */
.hero-aurora{ position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.hero-aurora::before,.hero-aurora::after{
  content:''; position:absolute; width:60vw; height:60vw; border-radius:50%;
  filter:blur(90px); opacity:.55; mix-blend-mode:screen;
}
.hero-aurora::before{ background:radial-gradient(circle,#5B7BF0 0%,transparent 62%); top:-18%; left:-12%; animation:drift1 16s ease-in-out infinite; }
.hero-aurora::after{ background:radial-gradient(circle,#F97316 0%,transparent 60%); bottom:-22%; right:-10%; opacity:.4; animation:drift2 19s ease-in-out infinite; }
@keyframes drift1{ 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(6%,8%) scale(1.12)} }
@keyframes drift2{ 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(-7%,-6%) scale(1.15)} }

/* =====================================================================
   "PIXEL-DRIFT" hero backdrop  — replaces the old uniform line-grid.
   An original motif derived from the Appsoware logo's dissolving-pixel
   swoosh: a fragmented, Poisson-scattered field of tiny squares (a few
   tinted brand cyan/orange) with broken connector ticks, over a soft
   volumetric bloom. Non-uniform density, an asymmetric dissolve mask
   (clusters top-right behind the logo, fades off the text), dual-speed
   generative drift, and an optional subtle mouse-parallax (via --gx/--gy,
   set by main.js; defaults to 0 so it's inert without JS and under
   prefers-reduced-motion). No square lattice, no isometric/synthwave
   cliché — it reads as the brand mark breathing, not a stock template.
   Structure unchanged: same empty <div class="hero-grid">, styled purely
   via CSS + pseudo-elements.
===================================================================== */
.hero-grid{
  position:absolute; inset:0; pointer-events:none; overflow:hidden;
  --gx:0px; --gy:0px;                 /* mouse-parallax offset (main.js) */
}
/* Layer A — volumetric depth: an off-centre indigo bloom + faint conic
   sheen behind the logo. Gives the flat navy real depth (no grid).      */
.hero-grid::before{
  content:''; position:absolute; inset:-12%;
  background:
    radial-gradient(40% 48% at 79% 40%, rgba(99,102,241,.18), transparent 70%),
    conic-gradient(from 210deg at 75% 38%,
      rgba(56,189,248,.05) 0deg, transparent 60deg,
      transparent 300deg, rgba(249,115,22,.06) 360deg);
  transform:translate(calc(var(--gx) * -0.6), calc(var(--gy) * -0.6));
  transition:transform .55s cubic-bezier(.22,.8,.36,1);
}
/* Layer B — the pixel-dissolve field. Two tiles at different scales drift
   in opposite directions (parallax depth). Masked so squares gather
   top-right behind the logo and dissolve toward the headline/left.       */
.hero-grid::after{
  content:''; position:absolute; inset:-10%;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22340%22%20height%3D%22340%22%20viewBox%3D%220%200%20340%20340%22%3E%3Cline%20x1%3D%22143.2%22%20y1%3D%22192.1%22%20x2%3D%22199.0%22%20y2%3D%22247.9%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%220.050%22%20stroke-width%3D%221%22%2F%3E%3Cline%20x1%3D%22328.7%22%20y1%3D%22228.7%22%20x2%3D%22396.7%22%20y2%3D%22228.7%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%220.050%22%20stroke-width%3D%221%22%2F%3E%3Cline%20x1%3D%22160.3%22%20y1%3D%22285.0%22%20x2%3D%22228.4%22%20y2%3D%22285.0%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%220.050%22%20stroke-width%3D%221%22%2F%3E%3Crect%20x%3D%22108.8%22%20y%3D%2250.0%22%20width%3D%222.6%22%20height%3D%222.6%22%20rx%3D%220.5%22%20fill%3D%22%2338BDF8%22%20fill-opacity%3D%220.132%22%2F%3E%3Crect%20x%3D%22220.1%22%20y%3D%2223.5%22%20width%3D%222.3%22%20height%3D%222.3%22%20rx%3D%220.5%22%20fill%3D%22%2338BDF8%22%20fill-opacity%3D%220.116%22%2F%3E%3Crect%20x%3D%22180.0%22%20y%3D%22122.2%22%20width%3D%224.3%22%20height%3D%224.3%22%20rx%3D%220.7%22%20fill%3D%22%23F97316%22%20fill-opacity%3D%220.121%22%2F%3E%3Crect%20x%3D%2217.5%22%20y%3D%22170.3%22%20width%3D%224.5%22%20height%3D%224.5%22%20rx%3D%220.7%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.123%22%2F%3E%3Crect%20x%3D%2220.1%22%20y%3D%2227.2%22%20width%3D%227.3%22%20height%3D%227.3%22%20rx%3D%221.2%22%20fill%3D%22%23F97316%22%20fill-opacity%3D%220.061%22%2F%3E%3Crect%20x%3D%22143.0%22%20y%3D%22279.8%22%20width%3D%222.6%22%20height%3D%222.6%22%20rx%3D%220.5%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.124%22%2F%3E%3Crect%20x%3D%2240.9%22%20y%3D%2274.7%22%20width%3D%222.4%22%20height%3D%222.4%22%20rx%3D%220.5%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.067%22%2F%3E%3Crect%20x%3D%22211.9%22%20y%3D%22320.7%22%20width%3D%223.0%22%20height%3D%223.0%22%20rx%3D%220.5%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.124%22%2F%3E%3Crect%20x%3D%22330.0%22%20y%3D%2213.9%22%20width%3D%223.9%22%20height%3D%223.9%22%20rx%3D%220.6%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.087%22%2F%3E%3Crect%20x%3D%22-2.0%22%20y%3D%22-2.0%22%20width%3D%224.0%22%20height%3D%224.0%22%20rx%3D%220.6%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.092%22%20transform%3D%22translate%28291.9%2098.5%29%20rotate%2845%29%22%2F%3E%3Crect%20x%3D%22-2.0%22%20y%3D%22-2.0%22%20width%3D%224.0%22%20height%3D%224.0%22%20rx%3D%220.6%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.077%22%20transform%3D%22translate%28104.9%20277.5%29%20rotate%2845%29%22%2F%3E%3Crect%20x%3D%2259.4%22%20y%3D%22195.7%22%20width%3D%224.0%22%20height%3D%224.0%22%20rx%3D%220.6%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.123%22%2F%3E%3Crect%20x%3D%22215.4%22%20y%3D%22124.8%22%20width%3D%223.6%22%20height%3D%223.6%22%20rx%3D%220.6%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.124%22%2F%3E%3Crect%20x%3D%22184.6%22%20y%3D%2219.7%22%20width%3D%223.3%22%20height%3D%223.3%22%20rx%3D%220.5%22%20fill%3D%22%2338BDF8%22%20fill-opacity%3D%220.133%22%2F%3E%3Crect%20x%3D%22104.5%22%20y%3D%22196.8%22%20width%3D%224.6%22%20height%3D%224.6%22%20rx%3D%220.7%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.150%22%2F%3E%3Crect%20x%3D%22-1.1%22%20y%3D%22-1.1%22%20width%3D%222.3%22%20height%3D%222.3%22%20rx%3D%220.5%22%20fill%3D%22%23F97316%22%20fill-opacity%3D%220.111%22%20transform%3D%22translate%28154.1%20101.9%29%20rotate%2845%29%22%2F%3E%3Crect%20x%3D%22266.9%22%20y%3D%22234.4%22%20width%3D%226.4%22%20height%3D%226.4%22%20rx%3D%221.0%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.070%22%2F%3E%3Crect%20x%3D%22175.5%22%20y%3D%22294.5%22%20width%3D%226.2%22%20height%3D%226.2%22%20rx%3D%221.0%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.126%22%2F%3E%3Crect%20x%3D%22246.4%22%20y%3D%2296.3%22%20width%3D%223.2%22%20height%3D%223.2%22%20rx%3D%220.5%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.099%22%2F%3E%3Crect%20x%3D%2211.2%22%20y%3D%22225.0%22%20width%3D%224.4%22%20height%3D%224.4%22%20rx%3D%220.7%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.069%22%2F%3E%3Crect%20x%3D%22258.8%22%20y%3D%22193.7%22%20width%3D%222.2%22%20height%3D%222.2%22%20rx%3D%220.5%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.106%22%2F%3E%3Crect%20x%3D%22195.2%22%20y%3D%22153.2%22%20width%3D%223.9%22%20height%3D%223.9%22%20rx%3D%220.6%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.117%22%2F%3E%3Crect%20x%3D%22281.1%22%20y%3D%22316.7%22%20width%3D%228.9%22%20height%3D%228.9%22%20rx%3D%221.4%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.125%22%2F%3E%3Crect%20x%3D%22-1.2%22%20y%3D%22-1.2%22%20width%3D%222.4%22%20height%3D%222.4%22%20rx%3D%220.5%22%20fill%3D%22%2338BDF8%22%20fill-opacity%3D%220.130%22%20transform%3D%22translate%28161.2%20225.8%29%20rotate%2845%29%22%2F%3E%3Crect%20x%3D%22-1.3%22%20y%3D%22-1.3%22%20width%3D%222.6%22%20height%3D%222.6%22%20rx%3D%220.5%22%20fill%3D%22%2338BDF8%22%20fill-opacity%3D%220.097%22%20transform%3D%22translate%2857.1%2039.8%29%20rotate%2845%29%22%2F%3E%3Crect%20x%3D%2217.9%22%20y%3D%22259.1%22%20width%3D%224.3%22%20height%3D%224.3%22%20rx%3D%220.7%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.050%22%2F%3E%3Crect%20x%3D%2292.2%22%20y%3D%22138.8%22%20width%3D%224.9%22%20height%3D%224.9%22%20rx%3D%220.8%22%20fill%3D%22%23F97316%22%20fill-opacity%3D%220.080%22%2F%3E%3Crect%20x%3D%22-1.7%22%20y%3D%22-1.7%22%20width%3D%223.3%22%20height%3D%223.3%22%20rx%3D%220.5%22%20fill%3D%22%2338BDF8%22%20fill-opacity%3D%220.113%22%20transform%3D%22translate%28325.6%2051.3%29%20rotate%2845%29%22%2F%3E%3Crect%20x%3D%22-1.4%22%20y%3D%22-1.4%22%20width%3D%222.8%22%20height%3D%222.8%22%20rx%3D%220.5%22%20fill%3D%22%23F97316%22%20fill-opacity%3D%220.151%22%20transform%3D%22translate%28200.3%2089.3%29%20rotate%2845%29%22%2F%3E%3Crect%20x%3D%22-1.7%22%20y%3D%22-1.7%22%20width%3D%223.5%22%20height%3D%223.5%22%20rx%3D%220.6%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.076%22%20transform%3D%22translate%281.4%20142.4%29%20rotate%2845%29%22%2F%3E%3Crect%20x%3D%22321.8%22%20y%3D%22232.5%22%20width%3D%224.5%22%20height%3D%224.5%22%20rx%3D%220.7%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.155%22%2F%3E%3Crect%20x%3D%22304.5%22%20y%3D%22263.9%22%20width%3D%222.6%22%20height%3D%222.6%22%20rx%3D%220.5%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.145%22%2F%3E%3Crect%20x%3D%22132.0%22%20y%3D%22134.3%22%20width%3D%222.7%22%20height%3D%222.7%22%20rx%3D%220.5%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.149%22%2F%3E%3Crect%20x%3D%2232.4%22%20y%3D%22121.5%22%20width%3D%224.2%22%20height%3D%224.2%22%20rx%3D%220.7%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.141%22%2F%3E%3Crect%20x%3D%227.5%22%20y%3D%22296.1%22%20width%3D%222.3%22%20height%3D%222.3%22%20rx%3D%220.5%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.063%22%2F%3E%3Crect%20x%3D%22156.2%22%20y%3D%22162.3%22%20width%3D%224.5%22%20height%3D%224.5%22%20rx%3D%220.7%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.109%22%2F%3E%3Crect%20x%3D%22-1.5%22%20y%3D%22-1.5%22%20width%3D%223.1%22%20height%3D%223.1%22%20rx%3D%220.5%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.084%22%20transform%3D%22translate%28116.5%2090.0%29%20rotate%2845%29%22%2F%3E%3Crect%20x%3D%22280.0%22%20y%3D%2253.0%22%20width%3D%223.7%22%20height%3D%223.7%22%20rx%3D%220.6%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.159%22%2F%3E%3Crect%20x%3D%22177.5%22%20y%3D%22330.6%22%20width%3D%224.1%22%20height%3D%224.1%22%20rx%3D%220.7%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.069%22%2F%3E%3Crect%20x%3D%2254.8%22%20y%3D%22260.5%22%20width%3D%224.0%22%20height%3D%224.0%22%20rx%3D%220.6%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.113%22%2F%3E%3Crect%20x%3D%22118.8%22%20y%3D%227.8%22%20width%3D%224.1%22%20height%3D%224.1%22%20rx%3D%220.7%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.167%22%2F%3E%3Crect%20x%3D%22-2.0%22%20y%3D%22-2.0%22%20width%3D%223.9%22%20height%3D%223.9%22%20rx%3D%220.6%22%20fill%3D%22%23F97316%22%20fill-opacity%3D%220.079%22%20transform%3D%22translate%289.5%2095.0%29%20rotate%2845%29%22%2F%3E%3Crect%20x%3D%2286.1%22%20y%3D%22233.4%22%20width%3D%224.1%22%20height%3D%224.1%22%20rx%3D%220.7%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.076%22%2F%3E%3Crect%20x%3D%22-1.5%22%20y%3D%22-1.5%22%20width%3D%223.0%22%20height%3D%223.0%22%20rx%3D%220.5%22%20fill%3D%22%23F97316%22%20fill-opacity%3D%220.120%22%20transform%3D%22translate%28325.2%20152.1%29%20rotate%2845%29%22%2F%3E%3Crect%20x%3D%22316.7%22%20y%3D%22334.1%22%20width%3D%223.8%22%20height%3D%223.8%22%20rx%3D%220.6%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.118%22%2F%3E%3Crect%20x%3D%22283.7%22%20y%3D%22160.9%22%20width%3D%224.2%22%20height%3D%224.2%22%20rx%3D%220.7%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.083%22%2F%3E%3C%2Fsvg%3E"),
                   url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22600%22%20height%3D%22600%22%20viewBox%3D%220%200%20600%20600%22%3E%3Cline%20x1%3D%22358.6%22%20y1%3D%22206.8%22%20x2%3D%22471.8%22%20y2%3D%22206.8%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%220.040%22%20stroke-width%3D%221%22%2F%3E%3Cline%20x1%3D%22317.4%22%20y1%3D%22538.2%22%20x2%3D%22317.4%22%20y2%3D%22623.8%22%20stroke%3D%22%23fff%22%20stroke-opacity%3D%220.040%22%20stroke-width%3D%221%22%2F%3E%3Crect%20x%3D%22550.0%22%20y%3D%22564.3%22%20width%3D%229.8%22%20height%3D%229.8%22%20rx%3D%221.6%22%20fill%3D%22%2338BDF8%22%20fill-opacity%3D%220.079%22%2F%3E%3Crect%20x%3D%22531.4%22%20y%3D%2246.1%22%20width%3D%228.1%22%20height%3D%228.1%22%20rx%3D%221.3%22%20fill%3D%22%23F97316%22%20fill-opacity%3D%220.037%22%2F%3E%3Crect%20x%3D%22351.3%22%20y%3D%22250.3%22%20width%3D%227.8%22%20height%3D%227.8%22%20rx%3D%221.3%22%20fill%3D%22%2338BDF8%22%20fill-opacity%3D%220.031%22%2F%3E%3Crect%20x%3D%22-4.0%22%20y%3D%22-4.0%22%20width%3D%228.1%22%20height%3D%228.1%22%20rx%3D%221.3%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.070%22%20transform%3D%22translate%28318.1%2078.2%29%20rotate%2845%29%22%2F%3E%3Crect%20x%3D%22111.0%22%20y%3D%22262.6%22%20width%3D%228.4%22%20height%3D%228.4%22%20rx%3D%221.3%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.066%22%2F%3E%3Crect%20x%3D%2210.3%22%20y%3D%2246.9%22%20width%3D%229.0%22%20height%3D%229.0%22%20rx%3D%221.4%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.050%22%2F%3E%3Crect%20x%3D%22304.4%22%20y%3D%22437.4%22%20width%3D%226.3%22%20height%3D%226.3%22%20rx%3D%221.0%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.056%22%2F%3E%3Crect%20x%3D%22465.6%22%20y%3D%22349.2%22%20width%3D%228.6%22%20height%3D%228.6%22%20rx%3D%221.4%22%20fill%3D%22%23F97316%22%20fill-opacity%3D%220.040%22%2F%3E%3Crect%20x%3D%22-3.4%22%20y%3D%22-3.4%22%20width%3D%226.8%22%20height%3D%226.8%22%20rx%3D%221.1%22%20fill%3D%22%2338BDF8%22%20fill-opacity%3D%220.036%22%20transform%3D%22translate%28582.4%20217.7%29%20rotate%2845%29%22%2F%3E%3Crect%20x%3D%22184.5%22%20y%3D%2247.3%22%20width%3D%228.3%22%20height%3D%228.3%22%20rx%3D%221.3%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.075%22%2F%3E%3Crect%20x%3D%22352.0%22%20y%3D%22563.7%22%20width%3D%227.2%22%20height%3D%227.2%22%20rx%3D%221.2%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.073%22%2F%3E%3Crect%20x%3D%2291.2%22%20y%3D%22575.9%22%20width%3D%2218.2%22%20height%3D%2218.2%22%20rx%3D%222.9%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.060%22%2F%3E%3Crect%20x%3D%229.8%22%20y%3D%22481.6%22%20width%3D%228.4%22%20height%3D%228.4%22%20rx%3D%221.3%22%20fill%3D%22%23F97316%22%20fill-opacity%3D%220.082%22%2F%3E%3Crect%20x%3D%22116.3%22%20y%3D%22402.9%22%20width%3D%2211.6%22%20height%3D%2211.6%22%20rx%3D%221.9%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.060%22%2F%3E%3Crect%20x%3D%22584.7%22%20y%3D%22375.6%22%20width%3D%229.8%22%20height%3D%229.8%22%20rx%3D%221.6%22%20fill%3D%22%23fff%22%20fill-opacity%3D%220.060%22%2F%3E%3Crect%20x%3D%22-4.9%22%20y%3D%22-4.9%22%20width%3D%229.9%22%20height%3D%229.9%22%20rx%3D%221.6%22%20fill%3D%22%23F97316%22%20fill-opacity%3D%220.051%22%20transform%3D%22translate%286.5%20201.6%29%20rotate%2845%29%22%2F%3E%3C%2Fsvg%3E");
  background-size:340px 340px, 600px 600px;
  background-repeat:repeat, repeat;
  transform:translate(var(--gx), var(--gy));
  transition:transform .55s cubic-bezier(.22,.8,.36,1);
  animation:px-drift 46s linear infinite;
  -webkit-mask-image:radial-gradient(125% 95% at 83% 36%,#000 6%,rgba(0,0,0,.6) 40%,transparent 76%);
          mask-image:radial-gradient(125% 95% at 83% 36%,#000 6%,rgba(0,0,0,.6) 40%,transparent 76%);
}
/* Seamless loop: each tile travels a whole number of its own tiles.
   fine +1 tile (340,-340); coarse -1 tile (-600,600) -> opposite drift. */
@keyframes px-drift{
  from{ background-position:0 0, 0 0; }
  to{   background-position:340px -340px, -600px 600px; }
}
.glow-orb{ position:absolute; border-radius:50%; filter:blur(70px); pointer-events:none; }

/* ---------------- hero logo showcase ----------------
   Glow behind the logo tinted to indigo + orange to match the palette. */
.hero-logo-wrap{ position:relative; display:inline-flex; }
.hero-logo{
  position:relative; z-index:2;
  filter:drop-shadow(0 22px 45px rgba(0,0,0,.45));
  animation:float 6s ease-in-out infinite;
}
.hero-logo-glow{
  position:absolute; inset:-14% -10%; z-index:1; border-radius:36% 64% 58% 42%/48% 42% 58% 52%;
  background:radial-gradient(circle at 45% 40%,rgba(99,102,241,.55),transparent 60%),
            radial-gradient(circle at 65% 70%,rgba(249,115,22,.45),transparent 62%);
  filter:blur(38px); animation:pulseGlow 5s ease-in-out infinite;
}
@keyframes float{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-14px)} }
@keyframes pulseGlow{ 0%,100%{opacity:.7; transform:scale(1)} 50%{opacity:1; transform:scale(1.06)} }

.chip-float{
  position:absolute; z-index:3; display:inline-flex; align-items:center; gap:.5rem;
  background:rgba(255,255,255,.9); backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.6);
  border-radius:14px; padding:.6rem .85rem; font-size:.82rem; font-weight:600; color:var(--ink);
  box-shadow:0 16px 34px -16px rgba(4,15,40,.55);
  animation:float 5.5s ease-in-out infinite;
}
.chip-float i{ font-size:1rem; }
.chip-float.c1{ animation-delay:.2s; }
.chip-float.c2{ animation-delay:1.1s; }
.chip-float.c3{ animation-delay:.6s; }

/* ---------------- animated brand logo in nav (with scroll shrink) ---------------- */
.nav-row{ height:118px; display:flex; align-items:center; justify-content:space-between; transition:height .35s ease; }
@media (max-width:640px){ .nav-row{ height:86px; } }
.brand-logo{ height:86px; width:auto; transition:height .35s ease; }
@media (min-width:640px){ .brand-logo{ height:98px; } }
#site-nav.scrolled .nav-row{ height:82px; }
#site-nav.scrolled .brand-logo{ height:60px; }

#site-nav{ transition:background-color .35s ease, box-shadow .35s ease; }
#site-nav.scrolled{ box-shadow:0 10px 34px -14px rgba(10,18,51,.28); background:rgba(255,255,255,.92); }

/* nav link underline animation — indigo -> cyan sweep */
.nav-link{ position:relative; }
.nav-link::after{
  content:''; position:absolute; left:0; right:100%; bottom:-6px; height:2px;
  background:linear-gradient(90deg,#4F46E5,#38BDF8); border-radius:2px;
  transition:right .3s ease;
}
.nav-link:hover::after,.nav-link.active::after{ right:0; }

/* ---------------- buttons ---------------- */
.btn-glow{ position:relative; overflow:hidden; }
.btn-glow::after{
  content:''; position:absolute; top:0; left:-120%; width:60%; height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);
  transform:skewX(-20deg); transition:left .6s ease;
}
.btn-glow:hover::after{ left:140%; }

/* ---------------- cards ---------------- */
.card-lift{ transition:transform .35s cubic-bezier(.22,.8,.36,1), box-shadow .35s ease; }
.card-lift:hover{ transform:translateY(-8px); box-shadow:0 30px 55px -22px rgba(10,18,51,.35); }

/* service card: gradient top accent + image zoom + glow ring on hover
   ring recolored to indigo -> orange to match palette                 */
.svc-card{ position:relative; transition:transform .35s cubic-bezier(.22,.8,.36,1), box-shadow .35s ease; }
.svc-card::before{
  content:''; position:absolute; inset:0; border-radius:1rem; padding:1.5px;
  background:linear-gradient(135deg,rgba(99,102,241,.9),rgba(249,115,22,.9));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:0; transition:opacity .35s ease; pointer-events:none;
}
.svc-card:hover{ transform:translateY(-8px); box-shadow:0 30px 55px -22px rgba(79,70,229,.35); }
.svc-card:hover::before{ opacity:1; }
.svc-card .svc-img img{ transition:transform .6s cubic-bezier(.22,.8,.36,1); }
.svc-card:hover .svc-img img{ transform:scale(1.07); }
.svc-icon{ transition:transform .35s ease; }
.svc-card:hover .svc-icon{ transform:rotate(-6deg) scale(1.08); }

/* featured (web apps) block — white sheen, theme-agnostic */
.feature-card{ position:relative; overflow:hidden; }
.feature-card .shine{
  position:absolute; top:-60%; left:-30%; width:60%; height:220%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.18),transparent);
  transform:rotate(12deg); transition:left .8s ease;
}
.feature-card:hover .shine{ left:130%; }

/* hardware tile — hover border switches to indigo-500 */
.hw-tile{ transition:transform .3s ease, border-color .3s ease, background-color .3s ease; }
.hw-tile:hover{ transform:translateY(-5px); border-color:#6366F1; background:rgba(255,255,255,.09); }
.hw-tile img{ transition:transform .5s ease; }
.hw-tile:hover img{ transform:scale(1.08); }

/* stat pill */
.stat-pill{ transition:transform .3s ease; }
.stat-pill:hover{ transform:translateY(-4px); }

/* ---------------- marquee (sector ticker) — indigo-tinted chips ---------------- */
.marquee{ overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.marquee-track{ display:inline-flex; gap:.9rem; white-space:nowrap; animation:marquee 26s linear infinite; }
.marquee:hover .marquee-track{ animation-play-state:paused; }
@keyframes marquee{ from{transform:translateX(0)} to{transform:translateX(-50%)} }
.marquee-chip{ display:inline-flex; align-items:center; gap:.5rem; padding:.5rem 1rem; border-radius:999px; background:rgba(79,70,229,.08); color:var(--ink); font-weight:600; font-size:.85rem; border:1px solid rgba(79,70,229,.14); }

/* ---------------- glass (white alpha — theme-agnostic) ---------------- */
.glass{ background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); backdrop-filter:blur(10px); }

/* ---------------- reveal-on-scroll ---------------- */
.reveal{ opacity:0; transform:translateY(30px); transition:opacity .6s ease, transform .6s cubic-bezier(.22,.8,.36,1); }
.reveal.in{ opacity:1; transform:translateY(0); }

/* ---------------- floating WhatsApp button (brand green — intentionally kept) ---------------- */
.wa-float{
  position:fixed; right:20px; bottom:20px; z-index:50;
  width:60px; height:60px; border-radius:50%;
  background:linear-gradient(135deg,#25d366,#128c3e);
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:27px; box-shadow:0 12px 32px -8px rgba(18,140,62,.65);
  transition:transform .25s ease;
}
.wa-float:hover{ transform:scale(1.08); }
.wa-float::before{ content:''; position:absolute; inset:0; border-radius:50%; box-shadow:0 0 0 0 rgba(37,211,102,.55); animation:wa-pulse 2.4s ease-out infinite; }
@keyframes wa-pulse{ 0%{box-shadow:0 0 0 0 rgba(37,211,102,.55)} 80%{box-shadow:0 0 0 24px rgba(37,211,102,0)} 100%{box-shadow:0 0 0 0 rgba(37,211,102,0)} }

/* ---------------- mobile menu + hamburger ---------------- */
#mobile-menu{ max-height:0; overflow:hidden; transition:max-height .4s ease; }
#mobile-menu.open{ max-height:560px; }
.hbtn span{ display:block; height:2px; border-radius:2px; background:var(--ink); transition:transform .3s ease, opacity .3s ease; }
.hbtn.active span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.hbtn.active span:nth-child(2){ opacity:0; }
.hbtn.active span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ---------------- reduced motion ---------------- */
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
  .reveal{ opacity:1; transform:none; }
}