/* ==========================================================================
   EWD Site — Hero Section
   Design tokens, layout, motion. Matches the EWD 2026 Figma file exactly:
   flat navy/purple/green accents on a deep indigo background, no brand
   gradients — Figma's own palette doesn't use any (every fill in the file
   is a solid color or a photo/glow image, confirmed by scanning the
   exported design code for gradient functions and finding none). The
   token NAMES below are kept from the previous gradient-based system so
   every file that already reads var(--blue)/var(--purple)/etc. picks up
   the new flat values automatically; --gradient-brand/--gradient-text
   specifically are now flat colors (not gradients) for the same reason —
   redefining them here instead of hunting down every consumer.
   ========================================================================== */

:root {
  --bg: #0e0628;
  --bg-alt: #130740;
  --surface: rgba(255, 255, 255, 0.045);
  --surface-strong: rgba(255, 255, 255, 0.08);
  --border: rgba(255, 255, 255, 0.09);
  --border-strong: rgba(255, 255, 255, 0.16);

  --text: #ffffff;
  --text-dim: #c0c0c0;
  --text-dimmer: #929292;

  --blue: #2c3b6c;
  --cyan: #8acfeb;
  --purple: #492e9f;
  --green: #61b461;
  --green-dark: #274829;
  --green-border: #247e29;

  /* Figma's own glass-panel treatment: a translucent deep-indigo fill
     with a solid purple border, used for cards/buttons/badges throughout
     (testimonial cards, the contact panel, the "Find out more" pill). */
  --panel-bg: rgba(25, 14, 61, 0.72);
  --panel-bg-soft: rgba(49, 33, 102, 0.18);
  --panel-bg-strong: rgba(19, 7, 60, 0.56);
  --panel-border: var(--purple);

  --gradient-brand: var(--blue);
  --gradient-text: var(--cyan);

  --shadow-glow-blue: 0 0 60px rgba(44, 59, 108, 0.35);
  --shadow-glow-purple: 0 0 70px rgba(73, 46, 159, 0.3);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  --font-body: "Roboto", sans-serif;
  --font-heading: "Montserrat", sans-serif;
  --font-third: "Inter 24pt", sans-serif;

  /* --header-h: 84px; */
  --container: 1512px;
}

h1, h2, h3, h4, h5, h6, p {
    margin: 0;
}
ul{
    margin-bottom: 0;
    padding-left: 0;
}

/* Scrollbar */
body::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    background-color: #0E0628;
}

body::-webkit-scrollbar {
    width: 10px;
    background-color: #39b54b;
}

body::-webkit-scrollbar-thumb {
    background-color: #39b54b;
}

/* End of Scrollbar */

/* ---------- Reset ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  color-scheme: dark;
  scroll-behavior: smooth;
  /* Belongs on the actual scrolling element (html, in standards mode) —
     not body. Setting overflow-x alone on body would force overflow-y to
     compute to auto too (CSS overflow spec), turning body into its own
     nested scroll container and breaking position:sticky/window.scrollY
     semantics for anything that relies on document-level scrolling. */
  overflow-x: hidden;
}

body {
  margin: 0;
  /* background: var(--bg); */
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  /* line-height: 1.5; */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  background: url('../img/body-bg-image.png');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  position: relative;
}

img,
svg,
canvas {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  top: -100%;
  left: 1rem;
  z-index: 1000;
  padding: 0.75rem 1.25rem;
  background: var(--text);
  color: var(--bg);
  border-radius: 8px;
  font-weight: 600;
  transition: top 0.2s var(--ease-out);
}

.skip-link:focus {
  top: 1rem;
}

:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ==========================================================================
   Bootstrap container override
   Every section's own "__inner" wrapper now also carries Bootstrap's
   .container class (see assets/vendor/bootstrap/bootstrap-grid.min.css,
   loaded before this file) for its centering/max-width mechanics, instead
   of each section repeating its own max-width/margin rule — but
   Bootstrap's own default steps that max-width per breakpoint (540/720/
   960/1140/1320px) rather than holding one consistent value, and adds its
   own left/right gutter padding on top. Neither matches this site's
   actual design: every section already had a single flat max-width
   (var(--container), 1320px at any viewport) with NO padding of its own
   on the __inner wrapper — edge spacing already comes from the
   surrounding <section>'s own padding (see e.g. .trust { padding: ...
   clamp(1.25rem, 4vw, 2.5rem) ...} in trust.css), so Bootstrap's gutter
   would just double up on top of that. This single override keeps using
   Bootstrap's actual container class/mechanism while reproducing the
   exact sizing this site had before it was introduced.
   ========================================================================== */

.container {
  max-width: var(--container);
  padding-left: 62px;
  padding-right: 62px;
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  position: relative;
  /* min-height: 100svh; */
  height: 100vh;
  overflow: hidden;
  /* isolation: isolate;
  background:
    radial-gradient(ellipse 60% 50% at 82% 38%, rgba(79, 140, 255, 0.16), transparent 60%),
    radial-gradient(ellipse 50% 45% at 15% 75%, rgba(155, 107, 255, 0.12), transparent 60%),
    var(--bg); */
}
.hero:before{
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  /* background: url('../img/body-bg-overlay.png'); */
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.hero__field {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.65;
}

.hero__grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, black 10%, transparent 75%);
}

.hero__vignette {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(5, 6, 10, 0.4) 0%, transparent 16%, transparent 78%, var(--bg) 100%),
    radial-gradient(ellipse 90% 70% at 50% 50%, transparent 55%, rgba(5, 6, 10, 0.55) 100%);
}

.hero__inner {
  position: relative;
  z-index: 2;
  /* padding: calc(var(--header-h) + 2rem) clamp(1.25rem, 4vw, 2.5rem) 3rem; */
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  align-items: center;
  /* gap: clamp(2rem, 5vw, 4rem); */
  height: 100%;
}
.hero__inner:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    /* background: #000; */
    opacity: 0.6;
    z-index: -1;
}

/* ---------- Content column ---------- */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.45rem 0.9rem 0.45rem 0.7rem;
  margin: 0 0 1.5rem;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  backdrop-filter: blur(10px);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text-dim);
  letter-spacing: 0.01em;
}

.eyebrow__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 10px 2px rgba(53, 230, 214, 0.8);
  animation: pulse-dot 2.4s ease-in-out infinite;
}

.hero__content {
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: end;
}

.hero__heading {
    color: #FFF;
    font-family: var(--font-body);
    font-size: 107px;
    font-style: normal;
    font-weight: 800;
    line-height: 112px;
    letter-spacing: -1.07px;
    text-transform: capitalize;
    margin-bottom: 32px;
    opacity: 0;
    transform: translateY(36px);
}
.hero__heading strong{
  color: #8ACFEB;
}

.hero__subtext {
  max-width: 500px;
  font-family: var(--font-body);
  opacity: 0;
  transform: translateY(16px);
  color: var(--text);
  font-size: 20px;
  font-weight: 300;
  line-height: 33px;
  margin-bottom: 33px;
}

[data-loaded="true"] [data-reveal] {
  animation: fade-up 0.9s var(--ease-out) forwards;
}

.eyebrow[data-reveal] { animation-delay: 0.02s !important; }
.hero__subtext[data-reveal] { animation-delay: 0.56s !important; }
.hero__actions[data-reveal] { animation-delay: 0.8s !important; }

.hero__actions {
  opacity: 0;
  transform: translateY(16px);
}

.hero__actions a{
  height: 61px;
  padding: 0 55px;
  border-radius: 9px;
  /* border: 1px solid #492E9F;
  background: rgba(25, 14, 61, 0.72); */
  border: 1px solid rgb(205 0 0 / 72%);
  background: rgb(205 0 0 / 72%);
  backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFF;
  text-align: center;
  font-family: var(--font-heading);
  font-size: 19px;
  font-weight: 600;
  line-height: 39px; 
  letter-spacing: 0.19px;
  transition: .5s;
}
.hero__actions a:hover {
    background: #39b54b;
    border-color: #39b54b;
    box-shadow: 0px 0px 18px #39b54b;
}
/* ---------- Visual column ---------- */

.hero__visual {
  position: relative;
  aspect-ratio: 1 / 1;
  max-height: 760px;
  justify-self: center;
  width: 100%;
  perspective: 1200px;
}

.visual__glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  z-index: 0;
  opacity: 0.55;
  pointer-events: none;
}

.visual__glow--a {
  width: 55%;
  height: 55%;
  top: 5%;
  right: 5%;
  background: radial-gradient(circle, rgba(79, 140, 255, 0.55), transparent 70%);
  animation: drift-a 12s var(--ease-in-out) infinite;
}

.visual__glow--b {
  width: 45%;
  height: 45%;
  bottom: 5%;
  left: 8%;
  background: radial-gradient(circle, rgba(155, 107, 255, 0.5), transparent 70%);
  animation: drift-b 14s var(--ease-in-out) infinite;
}

.visual__stage {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Carries the pointer-driven tilt (see hero.js initParallax) on its own —
   the glow/rings/particles/platform behind the figure lean toward the
   cursor, but the robot itself (.robot__figure, sized and positioned by
   robot.css/robot.js) and the orbit chips stay level and readable rather
   than tilting in 3D with the backdrop. Its glow/ring/particle children
   are all absolutely positioned with no explicit top/left of their own —
   flex is what centers them: an absolutely-positioned child of a flex
   container resolves its own auto-positioned placement using the
   container's align-items/justify-content, so without flex here they'd
   fall back to the default static position (pinned to the top-left
   corner) instead of centering on the figure. */
.visual__backdrop {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-style: preserve-3d;
  transition: transform 0.2s var(--ease-out);
  will-change: transform;
}

/* ==========================================================================
   Keyframes
   ========================================================================== */

@keyframes reveal-up {
  to {
    transform: translateY(0) rotate(0deg);
    opacity: 1;
  }
}

@keyframes fade-up {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.75); }
}

@keyframes drift-a {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-18px, 22px) scale(1.08); }
}

@keyframes drift-b {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(20px, -16px) scale(1.05); }
}

@keyframes scroll-line {
  0% { top: -100%; }
  100% { top: 100%; }
}

@keyframes cursor-pop {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.6); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* ==========================================================================
   Scroll reveal (site-wide)
   A generic fade-and-rise-in for section headers/content, independent of
   the hero's own on-load reveal system above (that one fires immediately
   on page load; this one fires per-element the first time it scrolls into
   view — see reveal.js). Every section below the hero opts in by marking
   its header wrapper [data-reveal-group] and each child that should
   animate [data-reveal-on-scroll]; children reveal in DOM order via the
   nth-child stagger below.
   ========================================================================== */

[data-reveal-on-scroll] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}

[data-reveal-on-scroll].is-revealed {
  opacity: 1;
  transform: translateY(0);
}

[data-reveal-group] > [data-reveal-on-scroll]:nth-child(1) { transition-delay: 0s; }
[data-reveal-group] > [data-reveal-on-scroll]:nth-child(2) { transition-delay: 0.1s; }
[data-reveal-group] > [data-reveal-on-scroll]:nth-child(3) { transition-delay: 0.2s; }
[data-reveal-group] > [data-reveal-on-scroll]:nth-child(4) { transition-delay: 0.3s; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal-on-scroll] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ==========================================================================
   Custom cursor
   ========================================================================== */

.cursor {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s var(--ease-out);
}

html.has-custom-cursor .cursor {
  opacity: 1;
}

html.has-custom-cursor a,
html.has-custom-cursor button,
html.has-custom-cursor input,
html.has-custom-cursor .orbit-chip__pill {
  cursor: none;
}

.cursor__dot {
  position: fixed;
  top: 0;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 10px 2px rgba(53, 230, 214, 0.75);
  transform: translate(-50%, -50%);
  will-change: transform;
}

.cursor__ring {
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.45);
  transform: translate(-50%, -50%);
  mix-blend-mode: exclusion;
  transition: width 0.28s var(--ease-out), height 0.28s var(--ease-out), border-color 0.28s var(--ease-out), background-color 0.28s var(--ease-out);
  will-change: transform, width, height;
}

.cursor__label {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text);
  opacity: 0;
  transition: opacity 0.2s var(--ease-out);
  mix-blend-mode: normal;
}

.cursor[data-active="true"] .cursor__ring {
  width: 64px;
  height: 64px;
  background: rgba(255, 255, 255, 0.08);
  border-color: transparent;
}

.cursor[data-active="true"] .cursor__label {
  opacity: 1;
}

.cursor[data-active="true"] .cursor__dot {
  opacity: 0;
}

@media (pointer: coarse) {
  .cursor {
    display: none;
  }
}

/* ==========================================================================
   Responsive
   ========================================================================== */

/* Compress vertical rhythm on short viewports (e.g. laptops with browser
   chrome) so hero content doesn't spill past the fold. */
@media (min-width: 1025px) and (max-height: 840px) {

  .hero__visual {
    max-height: 460px;
  }

}

@media (max-width: 1024px) {
  .hero__inner {
    grid-template-columns: 1fr;
    text-align: center;
    padding-top: calc(var(--header-h) + 1.5rem);
  }

  .hero__subtext {
    margin-left: auto;
    margin-right: auto;
  }

  .hero__actions {
    justify-content: center;
  }

  .reveal-line__inner {
    transform-origin: center bottom;
  }

  .hero__visual {
    max-height: 520px;
    margin-top: 1rem;
  }

}

@media (max-width: 640px) {
  .hero {
    min-height: 100svh;
  }

  .hero__heading {
    font-size: clamp(2.4rem, 11vw, 3.2rem);
  }
}

@media (max-width: 420px) {
  .hero__visual {
    max-height: 400px;
  }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  * ,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  .reveal-line__inner,
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }
}