/* ============================================================
   CODERN
   HERO SECTION
   File: css/components/hero.css
   Version: 4.1.0

   Theme Support:
   - Dark Mode = Original Codern Cyan / Blue / Violet
   - Light Mode = White / Purple / Violet
   - Global accent controlled by variables.css
   - Preserves original Hero layout, animation and UX

   NEW IN 4.1.0:
   - HTML5 technology symbol
   - CSS3 technology symbol
   - JavaScript technology symbol
   - Circular movement around hero.png
   - Upright technology labels while orbiting
   - Dark / Light theme support
   - Responsive technology orbit
   ============================================================ */


/* ============================================================
   HERO ROOT
============================================================ */

.hero-section {
  position: relative;

  min-height: 100vh;
  min-height: 100svh;

  display: flex;
  align-items: center;
  justify-content: center;

  overflow: hidden;

  padding-top: var(--header-height, 80px);

  isolation: isolate;

  background:
    radial-gradient(
      circle at 15% 25%,
      var(
        --hero-background-glow,
        var(--color-primary-soft, rgba(34, 211, 238, 0.035))
      ),
      transparent 30%
    ),
    var(
      --hero-background,
      linear-gradient(
        135deg,
        #050817 0%,
        #10172f 52%,
        #070a1b 100%
      )
    );

  color: var(--color-text);

  transition:
    background 300ms ease,
    color 300ms ease;
}


/* ============================================================
   BACKGROUND
============================================================ */

.hero-background {
  position: absolute;

  inset: 0;

  z-index: -3;

  overflow: hidden;

  pointer-events: none;
}


.hero-background-gradient {
  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      135deg,
      var(
        --hero-gradient-start,
        rgba(5, 8, 23, 0.98)
      ),
      var(
        --hero-gradient-middle,
        rgba(16, 23, 47, 0.96)
      ),
      var(
        --hero-gradient-end,
        rgba(7, 10, 27, 0.99)
      )
    );

  transition:
    background 300ms ease;
}


.hero-glow {
  position: absolute;

  width: 18rem;
  height: 18rem;

  border-radius: 50%;

  pointer-events: none;

  filter: blur(80px);

  opacity: 0.5;

  transition:
    background 300ms ease,
    opacity 300ms ease;
}


.hero-glow-primary {
  top: 10%;
  left: 4%;

  background: var(
    --hero-glow-primary,
    rgba(34, 211, 238, 0.09)
  );
}


.hero-glow-secondary {
  right: 4%;
  bottom: 4%;

  background: var(
    --hero-glow-secondary,
    rgba(139, 92, 246, 0.08)
  );
}


.hero-glow-center {
  top: 50%;
  left: 50%;

  width: 37.5rem;
  height: 37.5rem;

  transform: translate(-50%, -50%);

  background: var(
    --hero-glow-center,
    rgba(56, 189, 248, 0.035)
  );

  filter: blur(100px);
}


/* ============================================================
   PARTICLE LAYER
============================================================ */

.hero-particles {
  position: absolute;

  inset: 0;

  z-index: -1;

  pointer-events: none;

  overflow: hidden;
}


/* ============================================================
   CONTAINER
============================================================ */

.hero-container {
  position: relative;

  z-index: 1;

  width: 100%;

  padding-top: 4rem;
  padding-bottom: 4rem;
}


/* ============================================================
   GRID
============================================================ */

.hero-grid {
  display: grid;

  grid-template-columns:
    minmax(0, 1.15fr)
    minmax(320px, 0.85fr);

  align-items: center;

  gap: 2.5rem;
}


/* ============================================================
   CONTENT
============================================================ */

.hero-content {
  position: relative;

  z-index: 5;

  text-align: left;
}


/* ============================================================
   AVAILABILITY BADGE
============================================================ */

.hero-availability {
  display: inline-flex;

  align-items: center;
  gap: 0.55rem;

  margin-bottom: 1.5rem;

  padding: 0.55rem 1rem;

  border: 1px solid var(
    --hero-availability-border,
    var(--color-primary-soft, rgba(34, 211, 238, 0.15))
  );

  border-radius: 999px;

  background: var(
    --hero-availability-background,
    rgba(34, 211, 238, 0.04)
  );

  color: var(
    --hero-availability-color,
    var(--color-primary)
  );

  font-size: 0.875rem;
  font-weight: 500;

  box-shadow:
    0 10px 30px var(
      --hero-availability-shadow,
      rgba(34, 211, 238, 0.05)
    );

  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);

  transition:
    background-color 300ms ease,
    border-color 300ms ease,
    color 300ms ease,
    box-shadow 300ms ease;
}


.hero-availability-dot {
  position: relative;

  display: flex;

  width: 0.5rem;
  height: 0.5rem;
}


.hero-availability-dot::before,
.hero-availability-dot span {
  position: absolute;

  inset: 0;

  content: "";

  border-radius: 50%;

  background: var(
    --hero-accent-primary,
    var(--color-primary)
  );
}


.hero-availability-dot::before {
  animation: hero-ping 1.8s ease-out infinite;

  opacity: 0.7;
}


.hero-availability-dot span {
  z-index: 1;
}


/* ============================================================
   HERO TITLE
============================================================ */

.hero-title {
  margin: 0 0 1.5rem;

  font-size: clamp(
    2.25rem,
    5vw,
    3.75rem
  );

  font-weight: 700;

  line-height: 1.04;

  letter-spacing: -0.04em;

  color: var(--color-heading);

  transition: color 300ms ease;
}


.hero-title-line {
  display: block;
}


.hero-title-light {
  color: var(
    --hero-title-light,
    var(--color-heading)
  );

  transition: color 300ms ease;
}


.hero-title-gradient {
  margin-top: 0.5rem;

  background:
    var(
      --hero-title-gradient,
      linear-gradient(
        90deg,
        var(--brand-primary-light, #67e8f9) 0%,
        var(--brand-primary, #22d3ee) 48%,
        var(--brand-accent, #8b5cf6) 100%
      )
    );

  -webkit-background-clip: text;
  background-clip: text;

  color: transparent;
}


.hero-title-sub {
  margin-top: 0.5rem;

  color: var(
    --hero-title-sub,
    var(--color-text-muted)
  );

  font-size: 0.7em;

  transition: color 300ms ease;
}


/* ============================================================
   DESCRIPTION
============================================================ */

.hero-description {
  max-width: 42rem;

  margin: 0 0 2rem;

  color: var(
    --hero-description-color,
    var(--color-text-muted)
  );

  font-size: clamp(
    1rem,
    1.5vw,
    1.2rem
  );

  line-height: 1.75;

  transition: color 300ms ease;
}


/* ============================================================
   SERVICE HIGHLIGHTS
============================================================ */

.hero-highlights {
  display: flex;

  flex-wrap: wrap;

  align-items: center;

  gap: 0.5rem 1.25rem;

  margin-bottom: 2rem;
}


.hero-highlight {
  display: inline-flex;

  align-items: center;

  gap: 0.5rem;

  color: var(
    --hero-highlight-color,
    var(--color-text-muted)
  );

  font-size: 0.875rem;

  transition: color 300ms ease;
}


.hero-highlight-icon {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  width: 1.1rem;
  height: 1.1rem;

  color: var(
    --hero-accent-primary,
    var(--color-primary)
  );

  font-size: 0.7rem;
  font-weight: 700;

  transition: color 300ms ease;
}


.hero-highlight-icon-ai {
  color: var(
    --hero-accent-violet,
    var(--brand-accent-light, #a78bfa)
  );
}


.hero-highlight-icon-global {
  color: var(
    --hero-accent-blue,
    var(--brand-secondary, #3b82f6)
  );

  font-size: 1rem;
}


/* ============================================================
   CTA ACTIONS
============================================================ */

.hero-actions {
  display: flex;

  flex-wrap: wrap;

  align-items: center;

  gap: 0.9rem;

  margin-bottom: 2.5rem;
}


.hero-button {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  gap: 0.55rem;

  min-height: 3.5rem;

  padding: 0.85rem 1.7rem;

  border-radius: 0.7rem;

  font-size: 1rem;
  font-weight: 600;

  text-decoration: none;

  transition:
    transform 0.3s ease,
    background-color 0.3s ease,
    background 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease,
    color 0.3s ease;
}


.hero-button:hover {
  transform: translateY(-2px);
}


.hero-button:active {
  transform: scale(0.97);
}


/* ============================================================
   PRIMARY BUTTON
============================================================ */

.hero-button-primary {
  border: 1px solid var(
    --hero-button-primary-border,
    var(--brand-primary)
  );

  background:
    var(
      --gradient-primary,
      linear-gradient(
        135deg,
        var(--brand-primary-light, #67e8f9),
        var(--brand-primary, #22d3ee)
      )
    );

  color: var(
    --hero-button-primary-color,
    var(--color-on-primary, #061018)
  );

  box-shadow:
    0 12px 30px var(
      --hero-button-primary-shadow,
      var(--glow-primary, rgba(34, 211, 238, 0.18))
    );
}


.hero-button-primary:hover {
  background:
    var(
      --gradient-primary-hover,
      linear-gradient(
        135deg,
        var(--brand-primary-light, #a5f3fc),
        var(--brand-primary, #67e8f9)
      )
    );

  box-shadow:
    0 16px 40px var(
      --hero-button-primary-shadow-hover,
      var(--glow-primary-strong, rgba(34, 211, 238, 0.28))
    );
}


/* ============================================================
   SECONDARY BUTTON
============================================================ */

.hero-button-secondary {
  border: 1px solid var(
    --hero-button-secondary-border,
    var(--color-border)
  );

  background: var(
    --hero-button-secondary-background,
    rgba(255, 255, 255, 0.025)
  );

  color: var(
    --hero-button-secondary-color,
    var(--color-heading)
  );

  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}


.hero-button-secondary:hover {
  border-color: var(
    --hero-button-secondary-border-hover,
    var(--color-primary)
  );

  background: var(
    --hero-button-secondary-background-hover,
    rgba(255, 255, 255, 0.07)
  );

  color: var(
    --hero-button-secondary-color-hover,
    var(--color-primary-hover, var(--brand-primary-light))
  );
}


.hero-button-arrow,
.hero-button-external {
  transition:
    transform 0.3s ease;
}


.hero-button-primary:hover .hero-button-arrow {
  transform: translateX(4px);
}


.hero-button-secondary:hover .hero-button-external {
  transform: translate(2px, -2px);
}


/* ============================================================
   FOUNDER
============================================================ */

.hero-founder {
  margin-bottom: 2.5rem;
}


.hero-founder p {
  margin: 0.25rem 0;

  color: var(
    --hero-founder-muted,
    var(--color-text-subtle)
  );

  font-size: 0.875rem;

  transition: color 300ms ease;
}


.hero-founder p:first-child {
  color: var(
    --hero-founder-primary,
    var(--color-text-muted)
  );
}


.hero-founder strong {
  color: var(
    --hero-founder-name,
    var(--color-heading)
  );

  font-weight: 600;

  transition: color 300ms ease;
}


/* ============================================================
   STATS
============================================================ */

.hero-stats {
  display: grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap: 0.75rem;

  max-width: 42rem;
}


.hero-stat {
  padding: 1.1rem;

  border: 1px solid var(
    --hero-stat-border,
    var(--color-border)
  );

  border-radius: 1rem;

  background: var(
    --hero-stat-background,
    rgba(255, 255, 255, 0.035)
  );

  text-align: left;

  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  transition:
    border-color 0.3s ease,
    background-color 0.3s ease,
    transform 0.3s ease,
    box-shadow 0.3s ease;
}


.hero-stat:hover {
  border-color: var(
    --hero-stat-border-hover,
    var(--color-primary)
  );

  background: var(
    --hero-stat-background-hover,
    rgba(255, 255, 255, 0.055)
  );

  transform: translateY(-3px);
}


.hero-stat-value {
  margin-bottom: 0.2rem;

  background:
    var(
      --hero-stat-gradient,
      linear-gradient(
        90deg,
        var(--brand-primary-light, #67e8f9),
        var(--brand-primary, #22d3ee)
      )
    );

  -webkit-background-clip: text;
  background-clip: text;

  color: transparent;

  font-size: 1.9rem;
  font-weight: 700;

  line-height: 1;
}


.hero-stat-label {
  color: var(
    --hero-stat-label,
    var(--color-text-muted)
  );

  font-size: 0.8rem;

  transition: color 300ms ease;
}


/* ============================================================
   HERO VISUAL
============================================================ */

.hero-visual {
  display: flex;

  align-items: center;
  justify-content: flex-end;

  min-width: 0;
}


.hero-orbit {
  position: relative;

  width: min(
    430px,
    75vw
  );

  aspect-ratio: 1;

  margin-right: 1rem;
}


/* ============================================================
   ORBIT GLOWS
============================================================ */

.hero-orbit-glow {
  position: absolute;

  border-radius: 50%;

  pointer-events: none;

  filter: blur(55px);

  transition:
    background 300ms ease;
}


.hero-orbit-glow-primary {
  inset: -3.5rem;

  background: var(
    --hero-orbit-glow-primary,
    rgba(34, 211, 238, 0.055)
  );
}


.hero-orbit-glow-secondary {
  inset: -2rem;

  background: var(
    --hero-orbit-glow-secondary,
    rgba(139, 92, 246, 0.045)
  );

  filter: blur(45px);
}


/* ============================================================
   RINGS
============================================================ */

.hero-ring {
  position: absolute;

  border-radius: 50%;

  pointer-events: none;
}


.hero-ring-outer {
  inset: -2.5rem;

  border: 1px solid var(
    --hero-ring-outer-border,
    rgba(255, 255, 255, 0.07)
  );
}


/* ============================================================
   MAIN ENERGY RING
============================================================ */

.hero-ring-energy {
  inset: -1.75rem;

  padding: 3px;

  background:
    var(
      --hero-ring-energy,
      conic-gradient(
        from 0deg,
        transparent 0deg,
        transparent 28deg,
        var(--brand-primary, #22d3ee) 68deg,
        rgba(14, 165, 233, 0.35) 92deg,
        transparent 128deg,
        transparent 190deg,
        var(--brand-accent, #8b5cf6) 235deg,
        rgba(168, 85, 247, 0.35) 268deg,
        transparent 312deg,
        transparent 360deg
      )
    );

  animation:
    hero-rotate 16s linear infinite;
}


.hero-ring-inner {
  width: 100%;
  height: 100%;

  border-radius: inherit;

  background: var(
    --hero-ring-inner-background,
    #080c22
  );

  transition:
    background-color 300ms ease;
}


/* ============================================================
   SECONDARY RING
============================================================ */

.hero-ring-secondary {
  inset: -1.25rem;

  padding: 2px;

  background:
    var(
      --hero-ring-secondary,
      conic-gradient(
        from 180deg,
        transparent 0deg,
        var(--brand-primary, #22d3ee) 32deg,
        transparent 72deg,
        transparent 150deg,
        var(--brand-accent-light, #a78bfa) 205deg,
        transparent 250deg,
        transparent 330deg,
        var(--brand-secondary, #38bdf8) 350deg
      )
    );

  animation:
    hero-rotate-reverse 10s linear infinite;
}


.hero-ring-secondary .hero-ring-inner {
  background: var(
    --hero-ring-inner-background,
    #080c22
  );
}


/* ============================================================
   SEGMENTED RING
============================================================ */

.hero-ring-segmented {
  inset: -0.75rem;

  border: 2px solid var(
    --hero-ring-segmented-border,
    rgba(103, 232, 249, 0.15)
  );

  animation:
    hero-rotate 7s linear infinite;
}


/* ============================================================
   PRIMARY ARC
============================================================ */

.hero-ring-arc-primary {
  inset: -1rem;

  border: 4px solid transparent;

  border-top-color: var(
    --brand-primary-light,
    #67e8f9
  );

  border-left-color: var(
    --brand-primary,
    rgba(34, 211, 238, 0.7)
  );

  filter:
    drop-shadow(
      0 0 8px
      var(
        --hero-primary-arc-glow,
        rgba(34, 211, 238, 0.75)
      )
    );

  animation:
    hero-rotate-reverse 5.5s linear infinite;
}


/* ============================================================
   SECONDARY ARC
============================================================ */

.hero-ring-arc-secondary {
  inset: -1.5rem;

  border: 3px solid transparent;

  border-right-color: var(
    --brand-accent,
    #8b5cf6
  );

  border-bottom-color: var(
    --brand-accent-light,
    #a78bfa
  );

  filter:
    drop-shadow(
      0 0 9px
      var(
        --hero-secondary-arc-glow,
        rgba(139, 92, 246, 0.65)
      )
    );

  animation:
    hero-rotate 8s linear infinite;
}


/* ============================================================
   FRAME MARKERS
============================================================ */

.hero-frame-markers {
  position: absolute;

  inset: -2.25rem;

  pointer-events: none;
}


.hero-marker {
  position: absolute;

  display: block;

  border-radius: 999px;
}


.hero-marker-top,
.hero-marker-bottom {
  width: 2.5rem;
  height: 0.15rem;

  left: 50%;

  transform: translateX(-50%);

  background:
    linear-gradient(
      90deg,
      transparent,
      var(--brand-primary-light, #67e8f9),
      transparent
    );
}


.hero-marker-top {
  top: 0;

  box-shadow:
    0 0 14px var(
      --hero-marker-primary-glow,
      rgba(34, 211, 238, 0.8)
    );
}


.hero-marker-bottom {
  bottom: 0;

  background:
    linear-gradient(
      90deg,
      transparent,
      var(--brand-accent-light, #a78bfa),
      transparent
    );

  box-shadow:
    0 0 14px var(
      --hero-marker-secondary-glow,
      rgba(139, 92, 246, 0.7)
    );
}


.hero-marker-left,
.hero-marker-right {
  width: 0.15rem;
  height: 2.5rem;

  top: 50%;

  transform: translateY(-50%);
}


.hero-marker-left {
  left: 0;

  background:
    linear-gradient(
      180deg,
      transparent,
      var(--brand-primary-light, #67e8f9),
      transparent
    );
}


.hero-marker-right {
  right: 0;

  background:
    linear-gradient(
      180deg,
      transparent,
      var(--brand-accent-light, #a78bfa),
      transparent
    );
}


/* ============================================================
   IMAGE FRAME
============================================================ */

.hero-image-frame {
  position: absolute;

  inset: 0;

  z-index: 10;

  padding: 0.75rem;

  border: 1px solid var(
    --hero-image-frame-border,
    rgba(34, 211, 238, 0.25)
  );

  border-radius: 50%;

  background: var(
    --hero-image-frame-background,
    rgba(255, 255, 255, 0.035)
  );

  box-shadow:
    0 25px 70px var(
      --hero-image-frame-shadow,
      rgba(0, 0, 0, 0.45)
    ),
    0 0 40px var(
      --hero-image-frame-glow,
      rgba(34, 211, 238, 0.1)
    );

  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);

  transition:
    transform 0.45s ease,
    border-color 0.45s ease,
    background-color 300ms ease,
    box-shadow 300ms ease;
}


.hero-image-frame:hover {
  transform: scale(1.025);

  border-color: var(
    --hero-image-frame-border-hover,
    var(--color-primary)
  );
}


.hero-image-inner {
  position: relative;

  width: 100%;
  height: 100%;

  overflow: hidden;

  border: 1px solid var(
    --hero-image-inner-border,
    rgba(255, 255, 255, 0.1)
  );

  border-radius: 50%;

  background: var(
    --hero-image-inner-background,
    #080c22
  );

  transition:
    background-color 300ms ease,
    border-color 300ms ease;
}


.hero-image {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: contain;
}


.hero-image-overlay {
  position: absolute;

  inset: 0;

  pointer-events: none;

  background:
    linear-gradient(
      135deg,
      var(
        --hero-image-overlay-start,
        rgba(8, 12, 34, 0.15)
      ),
      transparent 50%,
      var(
        --hero-image-overlay-end,
        rgba(103, 232, 249, 0.04)
      )
    );
}


/* ============================================================
   NEW — TECHNOLOGY SYMBOL ORBIT
   ------------------------------------------------------------
   HTML5 / CSS3 / JavaScript

   These elements orbit around the existing hero image.

   Important:
   - Does NOT replace the existing rings.
   - Does NOT replace hero.png.
   - Does NOT modify existing badges.
   - Symbols remain upright while moving.
   - Each symbol follows the same circular path.
============================================================ */

.hero-tech-symbols {
  position: absolute;

  /*
   * The technology orbit extends beyond the existing
   * hero image and rings.
   */
  inset: -4.25rem;

  z-index: 25;

  pointer-events: none;

  /*
   * Prevent the technology layer from interfering with
   * the existing hero interaction.
   */
  overflow: visible;

  /*
   * Orbit radius used by the individual symbols.
   */
  --hero-tech-radius: 15rem;

  /*
   * Main technology colors.
   */
  --hero-tech-html-color:
    #f97316;

  --hero-tech-css-color:
    #38bdf8;

  --hero-tech-js-color:
    #facc15;

  /*
   * Shared technology surface.
   */
  --hero-tech-surface:
    rgba(7, 17, 32, 0.88);

  --hero-tech-border:
    rgba(255, 255, 255, 0.12);

  --hero-tech-text:
    rgba(255, 255, 255, 0.78);
}


/* ============================================================
   TECHNOLOGY SYMBOL
============================================================ */

.hero-tech-symbol {
  position: absolute;

  top: 50%;
  left: 50%;

  z-index: 30;

  width: max-content;

  transform-origin: center center;

  /*
   * Circular movement.
   *
   * The final rotate() in each keyframe compensates
   * the orbital rotation, keeping the badge upright.
   */
  animation:
    hero-tech-orbit 18s linear infinite;

  will-change: transform;

  pointer-events: none;
}


/* ============================================================
   TECHNOLOGY SYMBOL INNER
============================================================ */

.hero-tech-symbol-inner {
  display: inline-flex;

  align-items: center;

  gap: 0.5rem;

  min-height: 2.4rem;

  padding:
    0.45rem
    0.7rem;

  border: 1px solid var(
    --hero-tech-border,
    rgba(255, 255, 255, 0.12)
  );

  border-radius: 0.7rem;

  background: var(
    --hero-tech-surface,
    rgba(7, 17, 32, 0.88)
  );

  color: var(
    --hero-tech-text,
    rgba(255, 255, 255, 0.78)
  );

  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.28),
    0 0 18px
      var(
        --hero-tech-item-glow,
        rgba(34, 211, 238, 0.12)
      );

  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  white-space: nowrap;

  transition:
    background-color 300ms ease,
    border-color 300ms ease,
    color 300ms ease,
    box-shadow 300ms ease;
}


/* ============================================================
   TECHNOLOGY LOGO
============================================================ */

.hero-tech-logo {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  width: 1.65rem;
  height: 1.65rem;

  flex: 0 0 1.65rem;

  border-radius: 0.35rem;

  font-size: 0.78rem;
  font-weight: 900;

  line-height: 1;

  letter-spacing: -0.04em;

  color: #07111f;

  box-shadow:
    0 0 12px
      var(
        --hero-tech-logo-glow,
        rgba(34, 211, 238, 0.3)
      );
}


/* ============================================================
   HTML5
============================================================ */

.hero-tech-html5 {
  --hero-tech-item-glow:
    rgba(249, 115, 22, 0.2);

  animation-delay: 0s;
}


.hero-tech-logo-html {
  background:
    linear-gradient(
      135deg,
      #fb923c,
      #f97316
    );

  color: #ffffff;

  --hero-tech-logo-glow:
    rgba(249, 115, 22, 0.55);
}


.hero-tech-html5 .hero-tech-label {
  color:
    var(
      --hero-tech-html-label,
      #fdba74
    );
}


/* ============================================================
   CSS3
============================================================ */

.hero-tech-css3 {
  --hero-tech-item-glow:
    rgba(56, 189, 248, 0.2);

  animation-delay: -6s;
}


.hero-tech-logo-css {
  background:
    linear-gradient(
      135deg,
      #60a5fa,
      #2563eb
    );

  color: #ffffff;

  --hero-tech-logo-glow:
    rgba(56, 189, 248, 0.55);
}


.hero-tech-css3 .hero-tech-label {
  color:
    var(
      --hero-tech-css-label,
      #7dd3fc
    );
}


/* ============================================================
   JAVASCRIPT
============================================================ */

.hero-tech-javascript {
  --hero-tech-item-glow:
    rgba(250, 204, 21, 0.2);

  animation-delay: -12s;
}


.hero-tech-logo-js {
  background:
    linear-gradient(
      135deg,
      #fde047,
      #eab308
    );

  color: #111827;

  --hero-tech-logo-glow:
    rgba(250, 204, 21, 0.55);
}


.hero-tech-javascript .hero-tech-label {
  color:
    var(
      --hero-tech-js-label,
      #fde68a
    );
}


/* ============================================================
   TECHNOLOGY ORBIT ANIMATION
   ------------------------------------------------------------
   0%   = Top
   25%  = Right
   50%  = Bottom
   75%  = Left
   100% = Top

   The final rotate() value keeps the technology badge
   visually upright during movement.
============================================================ */

@keyframes hero-tech-orbit {

  0% {

    transform:
      translate(-50%, -50%)
      rotate(0deg)
      translateY(
        calc(-1 * var(--hero-tech-radius))
      )
      rotate(0deg);

  }


  25% {

    transform:
      translate(-50%, -50%)
      rotate(90deg)
      translateY(
        calc(-1 * var(--hero-tech-radius))
      )
      rotate(-90deg);

  }


  50% {

    transform:
      translate(-50%, -50%)
      rotate(180deg)
      translateY(
        calc(-1 * var(--hero-tech-radius))
      )
      rotate(-180deg);

  }


  75% {

    transform:
      translate(-50%, -50%)
      rotate(270deg)
      translateY(
        calc(-1 * var(--hero-tech-radius))
      )
      rotate(-270deg);

  }


  100% {

    transform:
      translate(-50%, -50%)
      rotate(360deg)
      translateY(
        calc(-1 * var(--hero-tech-radius))
      )
      rotate(-360deg);

  }

}


/* ============================================================
   TECHNOLOGY HOVER SAFETY
============================================================ */

.hero-tech-symbol-inner {
  user-select: none;

  -webkit-user-select: none;

  -webkit-touch-callout: none;
}


/* ============================================================
   FLOATING BADGES
============================================================ */

.hero-floating-badge {
  position: absolute;

  z-index: 40;

  display: inline-flex;

  align-items: center;

  gap: 0.5rem;

  padding: 0.55rem 0.75rem;

  border: 1px solid var(
    --hero-floating-badge-border,
    rgba(255, 255, 255, 0.1)
  );

  border-radius: 0.7rem;

  background: var(
    --hero-floating-badge-background,
    rgba(16, 22, 47, 0.9)
  );

  color: var(
    --hero-floating-badge-color,
    rgba(255, 255, 255, 0.75)
  );

  font-size: 0.75rem;
  font-weight: 500;

  box-shadow:
    0 15px 30px var(
      --hero-floating-badge-shadow,
      rgba(0, 0, 0, 0.3)
    );

  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);

  white-space: nowrap;

  transition:
    background-color 300ms ease,
    border-color 300ms ease,
    color 300ms ease,
    box-shadow 300ms ease;
}


.hero-badge-ai {
  top: 12%;
  right: -1.25rem;

  border-color: var(
    --hero-badge-ai-border,
    var(--color-primary-soft, rgba(34, 211, 238, 0.2))
  );

  color: var(
    --hero-badge-ai-color,
    var(--brand-primary-light, #67e8f9)
  );
}


.hero-badge-stack {
  bottom: 12%;
  left: -1.25rem;

  border-color: var(
    --hero-badge-stack-border,
    rgba(139, 92, 246, 0.2)
  );

  color: var(
    --hero-badge-stack-color,
    var(--brand-accent-light, #c4b5fd)
  );
}


.hero-badge-icon {
  font-size: 0.7rem;
  font-weight: 700;
}


/* ============================================================
   SYSTEM STATUS
============================================================ */

.hero-system-status {
  position: absolute;

  z-index: 40;

  left: 50%;
  bottom: -0.75rem;

  transform: translateX(-50%);

  display: inline-flex;

  align-items: center;

  gap: 0.5rem;

  padding: 0.4rem 0.8rem;

  border: 1px solid var(
    --hero-system-status-border,
    rgba(255, 255, 255, 0.1)
  );

  border-radius: 999px;

  background: var(
    --hero-system-status-background,
    rgba(11, 16, 37, 0.95)
  );

  color: var(
    --hero-system-status-color,
    rgba(255, 255, 255, 0.6)
  );

  font-size: 0.625rem;
  font-weight: 500;

  text-transform: uppercase;

  letter-spacing: 0.16em;

  white-space: nowrap;

  box-shadow:
    0 15px 30px var(
      --hero-system-status-shadow,
      rgba(0, 0, 0, 0.3)
    );

  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);

  transition:
    background-color 300ms ease,
    border-color 300ms ease,
    color 300ms ease,
    box-shadow 300ms ease;
}


.hero-system-dot {
  width: 0.375rem;
  height: 0.375rem;

  border-radius: 50%;

  background: #34d399;

  box-shadow:
    0 0 10px rgba(52, 211, 153, 0.9);

  animation:
    hero-pulse 1.8s ease-in-out infinite;
}


/* ============================================================
   FLOATING CHIPS
============================================================ */

.hero-floating-chip {
  position: absolute;

  z-index: 30;

  display: inline-flex;

  align-items: center;

  gap: 0.4rem;

  padding: 0.4rem 0.55rem;

  border: 1px solid var(
    --hero-floating-chip-border,
    rgba(255, 255, 255, 0.1)
  );

  border-radius: 0.5rem;

  background: var(
    --hero-floating-chip-background,
    rgba(13, 20, 48, 0.8)
  );

  color: var(
    --hero-floating-chip-color,
    rgba(255, 255, 255, 0.5)
  );

  font-size: 0.5625rem;
  font-weight: 500;

  text-transform: uppercase;

  letter-spacing: 0.1em;

  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);

  transition:
    background-color 300ms ease,
    border-color 300ms ease,
    color 300ms ease;
}


.hero-chip-fast {
  top: 20%;
  left: -0.25rem;

  color: var(
    --hero-chip-fast-color,
    var(--brand-primary-light, #67e8f9)
  );

  animation:
    hero-float-fast 3s ease-in-out infinite;
}


.hero-chip-digital {
  right: -0.25rem;
  bottom: 20%;

  color: var(
    --hero-chip-digital-color,
    var(--brand-accent-light, #c4b5fd)
  );

  animation:
    hero-float-digital 3.5s ease-in-out infinite;
}


/* ============================================================
   TRUST STRIP
============================================================ */

.hero-trust {
  display: flex;

  align-items: center;
  justify-content: center;

  gap: 1.25rem;

  margin-top: 4rem;
}


.hero-trust-line {
  width: 5rem;
  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      var(
        --hero-trust-line,
        rgba(255, 255, 255, 0.1)
      )
    );
}


.hero-trust-line-right {
  background:
    linear-gradient(
      270deg,
      transparent,
      var(
        --hero-trust-line,
        rgba(255, 255, 255, 0.1)
      )
    );
}


.hero-trust p {
  margin: 0;

  color: var(
    --hero-trust-text,
    var(--color-text-subtle)
  );

  font-size: 0.875rem;

  text-align: center;

  text-transform: uppercase;

  letter-spacing: 0.04em;

  transition: color 300ms ease;
}


.hero-trust-brands {
  display: flex;

  align-items: center;
  justify-content: center;

  flex-wrap: wrap;

  gap: 1.5rem 2.5rem;

  margin-top: 1.25rem;

  opacity: 0.6;
}


.hero-trust-brands span {
  color: var(
    --hero-trust-brand-color,
    var(--color-text-muted)
  );

  font-size: 0.9rem;
  font-weight: 600;

  transition: color 300ms ease;
}


.hero-trust-dot {
  width: 0.25rem;
  height: 0.25rem;

  border-radius: 50%;

  background: var(
    --hero-trust-dot,
    var(--color-primary)
  );
}


/* ============================================================
   REVEAL ANIMATION
============================================================ */

.hero-reveal {
  opacity: 0;

  transform: translateY(25px);

  transition:
    opacity 0.8s ease,
    transform 0.8s ease;
}


.hero-reveal.is-visible {
  opacity: 1;

  transform: translateY(0);
}


/* ============================================================
   LIGHT THEME
   Clean white surface + global purple accent
============================================================ */

[data-theme="light"] .hero-section {

  --hero-background-glow:
    rgba(139, 92, 246, 0.06);

  --hero-background:
    linear-gradient(
      135deg,
      #ffffff 0%,
      #faf7ff 52%,
      #f5f0ff 100%
    );

  --hero-gradient-start:
    rgba(255, 255, 255, 0.98);

  --hero-gradient-middle:
    rgba(250, 247, 255, 0.96);

  --hero-gradient-end:
    rgba(245, 240, 255, 0.99);


  /* ----------------------------------------------------------
     GLOWS
  ---------------------------------------------------------- */

  --hero-glow-primary:
    rgba(139, 92, 246, 0.08);

  --hero-glow-secondary:
    rgba(168, 85, 247, 0.065);

  --hero-glow-center:
    rgba(124, 58, 237, 0.045);


  /* ----------------------------------------------------------
     AVAILABILITY
  ---------------------------------------------------------- */

  --hero-availability-border:
    rgba(124, 58, 237, 0.2);

  --hero-availability-background:
    rgba(139, 92, 246, 0.07);

  --hero-availability-color:
    #6d28d9;

  --hero-availability-shadow:
    rgba(124, 58, 237, 0.08);

  --hero-accent-primary:
    #8b5cf6;


  /* ----------------------------------------------------------
     TITLE / TEXT
  ---------------------------------------------------------- */

  --hero-title-light:
    #0f172a;

  --hero-title-sub:
    #475569;

  --hero-description-color:
    #475569;

  --hero-title-gradient:
    linear-gradient(
      90deg,
      #7c3aed 0%,
      #8b5cf6 48%,
      #a855f7 100%
    );


  /* ----------------------------------------------------------
     HIGHLIGHTS
  ---------------------------------------------------------- */

  --hero-highlight-color:
    #64748b;

  --hero-accent-violet:
    #7c3aed;

  --hero-accent-blue:
    #8b5cf6;


  /* ----------------------------------------------------------
     PRIMARY CTA
  ---------------------------------------------------------- */

  --hero-button-primary-border:
    rgba(124, 58, 237, 0.45);

  --hero-button-primary-color:
    #ffffff;

  --hero-button-primary-shadow:
    rgba(124, 58, 237, 0.18);

  --hero-button-primary-shadow-hover:
    rgba(124, 58, 237, 0.3);

  --gradient-primary:
    linear-gradient(
      135deg,
      #a78bfa 0%,
      #8b5cf6 100%
    );

  --gradient-primary-hover:
    linear-gradient(
      135deg,
      #c4b5fd 0%,
      #a78bfa 100%
    );


  /* ----------------------------------------------------------
     SECONDARY CTA
  ---------------------------------------------------------- */

  --hero-button-secondary-border:
    rgba(15, 23, 42, 0.12);

  --hero-button-secondary-background:
    rgba(255, 255, 255, 0.78);

  --hero-button-secondary-color:
    #0f172a;

  --hero-button-secondary-border-hover:
    rgba(124, 58, 237, 0.38);

  --hero-button-secondary-background-hover:
    rgba(245, 240, 255, 0.9);

  --hero-button-secondary-color-hover:
    #7c3aed;


  /* ----------------------------------------------------------
     FOUNDER
  ---------------------------------------------------------- */

  --hero-founder-muted:
    #94a3b8;

  --hero-founder-primary:
    #64748b;

  --hero-founder-name:
    #0f172a;


  /* ----------------------------------------------------------
     STATS
  ---------------------------------------------------------- */

  --hero-stat-border:
    rgba(15, 23, 42, 0.1);

  --hero-stat-background:
    rgba(255, 255, 255, 0.72);

  --hero-stat-border-hover:
    rgba(124, 58, 237, 0.25);

  --hero-stat-background-hover:
    rgba(255, 255, 255, 0.94);

  --hero-stat-label:
    #64748b;

  --hero-stat-gradient:
    linear-gradient(
      90deg,
      #7c3aed,
      #a855f7
    );


  /* ----------------------------------------------------------
     ORBIT
  ---------------------------------------------------------- */

  --hero-orbit-glow-primary:
    rgba(139, 92, 246, 0.08);

  --hero-orbit-glow-secondary:
    rgba(168, 85, 247, 0.07);

  --hero-ring-outer-border:
    rgba(15, 23, 42, 0.1);

  --hero-ring-segmented-border:
    rgba(124, 58, 237, 0.16);

  --hero-ring-inner-background:
    #faf7ff;

  --hero-ring-energy:
    conic-gradient(
      from 0deg,
      transparent 0deg,
      transparent 28deg,
      #8b5cf6 68deg,
      rgba(139, 92, 246, 0.35) 92deg,
      transparent 128deg,
      transparent 190deg,
      #a855f7 235deg,
      rgba(168, 85, 247, 0.35) 268deg,
      transparent 312deg,
      transparent 360deg
    );

  --hero-ring-secondary:
    conic-gradient(
      from 180deg,
      transparent 0deg,
      #8b5cf6 32deg,
      transparent 72deg,
      transparent 150deg,
      #a78bfa 205deg,
      transparent 250deg,
      transparent 330deg,
      #a855f7 350deg
    );


  /* ----------------------------------------------------------
     ORBIT ARCS
  ---------------------------------------------------------- */

  --hero-primary-arc-glow:
    rgba(139, 92, 246, 0.55);

  --hero-secondary-arc-glow:
    rgba(124, 58, 237, 0.5);

  --hero-marker-primary-glow:
    rgba(139, 92, 246, 0.55);

  --hero-marker-secondary-glow:
    rgba(168, 85, 247, 0.55);


  /* ----------------------------------------------------------
     IMAGE
  ---------------------------------------------------------- */

  --hero-image-frame-border:
    rgba(124, 58, 237, 0.22);

  --hero-image-frame-background:
    rgba(255, 255, 255, 0.68);

  --hero-image-frame-shadow:
    rgba(15, 23, 42, 0.15);

  --hero-image-frame-glow:
    rgba(139, 92, 246, 0.12);

  --hero-image-frame-border-hover:
    rgba(124, 58, 237, 0.42);

  --hero-image-inner-border:
    rgba(15, 23, 42, 0.1);

  --hero-image-inner-background:
    #faf7ff;

  --hero-image-overlay-start:
    rgba(250, 247, 255, 0.08);

  --hero-image-overlay-end:
    rgba(139, 92, 246, 0.05);


  /* ----------------------------------------------------------
     FLOATING BADGES
  ---------------------------------------------------------- */

  --hero-floating-badge-border:
    rgba(15, 23, 42, 0.1);

  --hero-floating-badge-background:
    rgba(255, 255, 255, 0.9);

  --hero-floating-badge-color:
    #475569;

  --hero-floating-badge-shadow:
    rgba(15, 23, 42, 0.14);

  --hero-badge-ai-border:
    rgba(124, 58, 237, 0.2);

  --hero-badge-ai-color:
    #7c3aed;

  --hero-badge-stack-border:
    rgba(168, 85, 247, 0.2);

  --hero-badge-stack-color:
    #7c3aed;


  /* ----------------------------------------------------------
     NEW — TECHNOLOGY SYMBOLS
  ---------------------------------------------------------- */

  --hero-tech-surface:
    rgba(255, 255, 255, 0.9);

  --hero-tech-border:
    rgba(15, 23, 42, 0.1);

  --hero-tech-text:
    #334155;

  --hero-tech-html-label:
    #ea580c;

  --hero-tech-css-label:
    #2563eb;

  --hero-tech-js-label:
    #ca8a04;


  /* ----------------------------------------------------------
     SYSTEM STATUS
  ---------------------------------------------------------- */

  --hero-system-status-border:
    rgba(15, 23, 42, 0.1);

  --hero-system-status-background:
    rgba(255, 255, 255, 0.94);

  --hero-system-status-color:
    #64748b;

  --hero-system-status-shadow:
    rgba(15, 23, 42, 0.12);


  /* ----------------------------------------------------------
     FLOATING CHIPS
  ---------------------------------------------------------- */

  --hero-floating-chip-border:
    rgba(15, 23, 42, 0.1);

  --hero-floating-chip-background:
    rgba(255, 255, 255, 0.86);

  --hero-floating-chip-color:
    #64748b;

  --hero-chip-fast-color:
    #7c3aed;

  --hero-chip-digital-color:
    #9333ea;


  /* ----------------------------------------------------------
     TRUST STRIP
  ---------------------------------------------------------- */

  --hero-trust-line:
    rgba(15, 23, 42, 0.12);

  --hero-trust-text:
    #94a3b8;

  --hero-trust-brand-color:
    #64748b;

  --hero-trust-dot:
    rgba(124, 58, 237, 0.65);
}


/* ============================================================
   KEYFRAMES
============================================================ */

@keyframes hero-rotate {

  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }

}


@keyframes hero-rotate-reverse {

  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(-360deg);
  }

}


@keyframes hero-ping {

  0% {
    transform: scale(1);
    opacity: 0.7;
  }

  75%,
  100% {
    transform: scale(2.2);
    opacity: 0;
  }

}


@keyframes hero-pulse {

  0%,
  100% {
    opacity: 0.65;
    transform: scale(1);
  }

  50% {
    opacity: 1;
    transform: scale(1.15);
  }

}


@keyframes hero-float-fast {

  0%,
  100% {
    transform: translateY(0);
    opacity: 0.65;
  }

  50% {
    transform: translateY(-5px);
    opacity: 1;
  }

}


@keyframes hero-float-digital {

  0%,
  100% {
    transform: translateY(0);
    opacity: 0.65;
  }

  50% {
    transform: translateY(5px);
    opacity: 1;
  }

}


/* ============================================================
   TABLET
============================================================ */

@media (max-width: 1100px) {

  .hero-grid {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(300px, 0.8fr);

    gap: 2rem;
  }


  .hero-title {
    font-size: clamp(
      2.25rem,
      5vw,
      3.4rem
    );
  }


  .hero-orbit {
    width: min(
      380px,
      70vw
    );
  }


  /* ----------------------------------------------------------
     TECHNOLOGY ORBIT
  ---------------------------------------------------------- */

  .hero-tech-symbols {
    --hero-tech-radius: 13.5rem;
  }

}


/* ============================================================
   MOBILE / TABLET
============================================================ */

@media (max-width: 1023px) {

  .hero-container {
    padding-top: 5rem;
    padding-bottom: 4rem;
  }


  .hero-grid {
    grid-template-columns: 1fr;

    gap: 3.5rem;
  }


  .hero-content {
    order: 2;

    text-align: center;
  }


  .hero-visual {
    order: 1;

    justify-content: center;
  }


  .hero-availability {
    margin-right: auto;
    margin-left: auto;
  }


  .hero-description {
    margin-right: auto;
    margin-left: auto;
  }


  .hero-highlights {
    justify-content: center;
  }


  .hero-actions {
    justify-content: center;
  }


  .hero-founder {
    text-align: center;
  }


  .hero-stats {
    margin-right: auto;
    margin-left: auto;

    text-align: center;
  }


  .hero-stat {
    text-align: center;
  }


  .hero-orbit {
    margin-right: 0;
  }


  /* ----------------------------------------------------------
     TECHNOLOGY ORBIT
  ---------------------------------------------------------- */

  .hero-tech-symbols {
    --hero-tech-radius: 13rem;
  }


  .hero-tech-symbol-inner {
    min-height: 2.25rem;

    padding:
      0.4rem
      0.6rem;
  }


  .hero-tech-logo {
    width: 1.5rem;
    height: 1.5rem;

    flex-basis: 1.5rem;

    font-size: 0.72rem;
  }


  .hero-tech-label {
    font-size: 0.72rem;
  }

}


/* ============================================================
   SMALL MOBILE
============================================================ */

@media (max-width: 640px) {

  .hero-container {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }


  .hero-title {
    font-size: clamp(
      2rem,
      9vw,
      2.8rem
    );
  }


  .hero-description {
    font-size: 1rem;

    line-height: 1.7;
  }


  .hero-actions {
    flex-direction: column;

    width: 100%;
  }


  .hero-button {
    width: 100%;
  }


  .hero-stats {
    grid-template-columns: 1fr;

    max-width: 24rem;
  }


  .hero-stat {
    padding: 1rem;
  }


  .hero-orbit {
    width: min(
      340px,
      72vw
    );
  }


  .hero-badge-ai {
    right: -0.4rem;
  }


  .hero-badge-stack {
    left: -0.4rem;
  }


  .hero-chip-fast,
  .hero-chip-digital {
    display: none;
  }


  /* ----------------------------------------------------------
     TECHNOLOGY ORBIT
  ---------------------------------------------------------- */

  .hero-tech-symbols {
    --hero-tech-radius: 11.25rem;
  }


  .hero-tech-symbol-inner {
    min-height: 2rem;

    gap: 0.35rem;

    padding:
      0.35rem
      0.5rem;

    border-radius: 0.6rem;
  }


  .hero-tech-logo {
    width: 1.3rem;
    height: 1.3rem;

    flex-basis: 1.3rem;

    border-radius: 0.28rem;

    font-size: 0.65rem;
  }


  .hero-tech-label {
    font-size: 0.62rem;
  }


  .hero-trust {
    gap: 0.75rem;

    margin-top: 3rem;
  }


  .hero-trust-line {
    width: 2.5rem;
  }


  .hero-trust p {
    font-size: 0.7rem;
  }


  .hero-trust-brands {
    gap: 1rem 1.5rem;
  }

}


/* ============================================================
   VERY SMALL MOBILE
============================================================ */

@media (max-width: 420px) {

  .hero-orbit {
    width: 70vw;
  }


  .hero-floating-badge {
    padding: 0.45rem 0.6rem;

    font-size: 0.65rem;
  }


  .hero-system-status {
    font-size: 0.55rem;
  }


  /* ----------------------------------------------------------
     TECHNOLOGY ORBIT
  ---------------------------------------------------------- */

  .hero-tech-symbols {
    --hero-tech-radius: 9.75rem;
  }


  .hero-tech-symbol-inner {
    gap: 0.25rem;

    padding:
      0.3rem
      0.4rem;
  }


  .hero-tech-logo {
    width: 1.15rem;
    height: 1.15rem;

    flex-basis: 1.15rem;

    font-size: 0.58rem;
  }


  .hero-tech-label {
    font-size: 0.55rem;
  }


  .hero-trust-brands span {
    font-size: 0.75rem;
  }

}


/* ============================================================
   REDUCED MOTION
============================================================ */

@media (prefers-reduced-motion: reduce) {

  .hero-ring,
  .hero-system-dot,
  .hero-availability-dot::before,
  .hero-chip-fast,
  .hero-chip-digital,
  .hero-tech-symbol {
    animation: none;
  }


  .hero-reveal {
    opacity: 1;

    transform: none;

    transition: none;
  }


  .hero-button,
  .hero-image-frame,
  .hero-stat {
    transition: none;
  }

}