/*
Theme Name: Software House Astra Child
Theme URI: https://wpastra.com/
Description: Astra child theme foundation for the Software House website. Pair with Astra parent theme and Elementor Free.
Author: Website Project
Template: astra
Version: 1.0.0
Text Domain: software-house-astra-child
*/

/* Global design tokens */
:root {
  --sh-ink: #101322;
  --sh-ink-soft: #1b2034;
  --sh-purple: #7557ff;
  --sh-cyan: #42d8ed;
  --sh-violet: #a88cff;
  --sh-text: #20243a;
  --sh-muted: #697086;
  --sh-light: #f6f7fb;
  --sh-white: #fff;
  --sh-border: rgba(20, 24, 48, .12);
  --sh-radius: 22px;
  --sh-shadow: 0 18px 55px rgba(23, 25, 54, .12);
  --sh-content: 1200px;
}

/* Consistent typography; choose/load your final licensed font in Astra Customizer. */
html { scroll-behavior: smooth; }
body { color: var(--sh-text); }
a { transition: color .2s ease, background-color .2s ease, transform .2s ease; }
:focus-visible { outline: 3px solid var(--sh-cyan); outline-offset: 3px; }

/* Transparent Astra header: enable Astra's Transparent Header option where supported.
   This styling is a fallback; confirm header markup against your installed Astra version. */
.ast-theme-transparent-header #masthead,
.ast-theme-transparent-header .main-header-bar,
.ast-theme-transparent-header .ast-primary-header-bar {
  background: transparent;
  box-shadow: none;
}
.ast-theme-transparent-header .main-header-menu > .menu-item > .menu-link,
.ast-theme-transparent-header .ast-builder-menu-1 .menu-item > .menu-link {
  color: #fff;
}
.ast-theme-transparent-header .main-header-menu > .menu-item > .menu-link:hover,
.ast-theme-transparent-header .ast-builder-menu-1 .menu-item > .menu-link:hover {
  color: var(--sh-cyan);
}
.ast-primary-header-bar { transition: background-color .25s ease, box-shadow .25s ease; }
.ast-mobile-header-wrap .ast-button-wrap .menu-toggle { border-radius: 12px; }

/* Elementor page canvas */
.sh-page { overflow: clip; }
.sh-section { padding: clamp(56px, 7vw, 104px) 24px; }
.sh-inner { width: min(100%, var(--sh-content)); margin-inline: auto; }
.sh-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--sh-purple); font-size: .82rem; font-weight: 800;
  letter-spacing: .13em; text-transform: uppercase;
}
.sh-eyebrow:before { content: ""; width: 26px; height: 2px; background: currentColor; }
.sh-title { letter-spacing: -.045em; line-height: 1.04; }
.sh-gradient-text {
  background: linear-gradient(100deg, var(--sh-cyan), var(--sh-violet) 55%, var(--sh-purple));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.sh-muted { color: var(--sh-muted); }
.sh-button, .elementor-widget-button .elementor-button {
  border: 1px solid transparent; border-radius: 999px;
  padding: 15px 24px; font-weight: 750;
  background: linear-gradient(100deg, var(--sh-purple), #5c78ff);
  box-shadow: 0 10px 28px rgba(117,87,255,.22);
}
.sh-button:hover, .elementor-widget-button .elementor-button:hover {
  transform: translateY(-2px); color: #fff;
  box-shadow: 0 14px 32px rgba(117,87,255,.32);
}
.sh-button-outline .elementor-button {
  background: transparent; border-color: rgba(255,255,255,.38); box-shadow: none;
}
.sh-button-outline .elementor-button:hover { background: rgba(255,255,255,.1); }

/* Hero area: CSS-generated visual treatment, no third-party image dependency. */
.sh-hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: min(820px, 100svh); display: flex; align-items: center;
  color: #fff; background:
    radial-gradient(ellipse at 76% 38%, rgba(117,87,255,.32), transparent 36%),
    radial-gradient(ellipse at 58% 80%, rgba(66,216,237,.14), transparent 32%),
    linear-gradient(135deg, #0d1020 0%, #14172b 58%, #101323 100%);
}
.sh-hero:before, .sh-hero:after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  border: 1px solid rgba(168,140,255,.2); border-radius: 50%;
  width: min(55vw, 760px); aspect-ratio: 1; right: -8%; top: 8%;
  animation: sh-orbit 22s linear infinite;
}
.sh-hero:after {
  width: min(43vw, 590px); right: 0%; top: 19%;
  border-color: rgba(66,216,237,.19); animation-duration: 28s; animation-direction: reverse;
}
.sh-hero .elementor-heading-title { color: #fff; }
.sh-hero p { color: #c4c8db; }
.sh-hero-visual {
  position: relative; min-height: 390px; border: 1px solid rgba(255,255,255,.16);
  border-radius: 28px; background: linear-gradient(145deg, rgba(255,255,255,.12), rgba(255,255,255,.025));
  box-shadow: 0 30px 100px rgba(0,0,0,.25); backdrop-filter: blur(12px);
  overflow: hidden;
}
.sh-hero-visual:before {
  content: ""; position: absolute; inset: 12% 10%;
  background:
    linear-gradient(90deg, transparent 49%, rgba(66,216,237,.2) 50%, transparent 51%),
    linear-gradient(0deg, transparent 49%, rgba(168,140,255,.18) 50%, transparent 51%);
  background-size: 42px 42px; mask-image: linear-gradient(to bottom, #000, transparent);
}
.sh-floating-card {
  position: absolute; border: 1px solid rgba(255,255,255,.18); border-radius: 16px;
  padding: 18px 20px; background: rgba(19,22,43,.82); color: #fff;
  box-shadow: 0 20px 45px rgba(0,0,0,.22); animation: sh-float 7s ease-in-out infinite;
}
.sh-floating-card:nth-child(2) { animation-delay: -2.2s; }
.sh-floating-card:nth-child(3) { animation-delay: -4.1s; }
.sh-pulse-dot { display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--sh-cyan); box-shadow:0 0 18px var(--sh-cyan); margin-right:8px; }

/* Cards and sections */
.sh-light-section { background: var(--sh-light); }
.sh-dark-section { color: #fff; background: var(--sh-ink); }
.sh-dark-section h1, .sh-dark-section h2, .sh-dark-section h3 { color: #fff; }
.sh-card {
  height: 100%; padding: clamp(22px, 3vw, 34px); border-radius: var(--sh-radius);
  border: 1px solid var(--sh-border); background: #fff; box-shadow: 0 8px 28px rgba(20,24,48,.045);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.sh-card:hover { transform: translateY(-5px); box-shadow: var(--sh-shadow); border-color: rgba(117,87,255,.3); }
.sh-dark-section .sh-card { background: rgba(255,255,255,.055); border-color: rgba(255,255,255,.12); }
.sh-icon {
  display: grid; place-items: center; width: 54px; height: 54px; border-radius: 16px;
  color: var(--sh-purple); background: rgba(117,87,255,.1); font-size: 1.35rem;
}
.sh-step-number { color: var(--sh-purple); font-weight: 850; font-size: .9rem; letter-spacing: .1em; }
.sh-cta {
  color: #fff; border-radius: 28px; padding: clamp(30px, 5vw, 64px);
  background: radial-gradient(circle at 90% 10%, rgba(66,216,237,.25), transparent 30%),
    linear-gradient(120deg, #171a32, #29214d);
}
.sh-cta h2, .sh-cta h3 { color: #fff; }

/* Footer utility */
.sh-footer { background: #0d1020; color: #c4c8db; }
.sh-footer a { color: #fff; }
.sh-footer a:hover { color: var(--sh-cyan); }

/* Accessibility and responsive */
@keyframes sh-orbit { to { transform: rotate(360deg); } }
@keyframes sh-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *:before, *:after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
@media (max-width: 1024px) {
  .sh-hero { min-height: auto; padding-block: 120px 72px; }
  .sh-hero:before { width: 70vw; right: -20%; }
  .sh-hero:after { width: 55vw; right: -8%; }
  .sh-hero-visual { min-height: 330px; }
}
@media (max-width: 767px) {
  .sh-section { padding: 54px 18px; }
  .sh-hero { padding-block: 104px 54px; }
  .sh-hero:before { width: 90vw; top: 20%; right: -38%; }
  .sh-hero:after { width: 72vw; top: 30%; right: -20%; }
  .sh-hero-visual { min-height: 280px; border-radius: 20px; }
  .sh-floating-card { padding: 12px 14px; font-size: .86rem; }
}