/* ==========================================================================
   AMALY MODERNIZE — Creative Tech Aesthetic Layer
   Loaded AFTER amaly-premium.css to override and extend.
   Fonts: Syne (display) + Outfit (body)
   Aesthetic: Sharp, geometric, electric — NOT generic AI/SaaS
   ========================================================================== */

/* ==========================================================================
   1. FONT SYSTEM — Geometric Sans-Serif (Syne + Outfit)
   ========================================================================== */

:root {
  --font-display: Georgia, 'Times New Roman', serif;
  --font-body: Georgia, 'Times New Roman', serif;
}

body {
  font-family: var(--font-body) !important;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display) !important;
  letter-spacing: -0.03em;
}

.amaly-hero__title,
.amaly-section__title,
.amaly-cta__title,
.amaly-page-banner__title,
.amaly-feature-card__title,
.amaly-card__title,
.amaly-counter-card__number,
.amaly-about__badge-number,
.amaly-skill-item__title,
.amaly-footer__widget-title,
.amaly-about__author-name,
.amaly-card__number,
.amaly-skill-item__percent,
.amaly-modal__title {
  font-family: var(--font-display) !important;
}

.main-menu > li > a,
.amaly-btn,
.amaly-tag,
.amaly-hero__text,
.amaly-card__text,
.amaly-about__text,
.amaly-skills__text,
.amaly-footer__desc,
.amaly-footer__links a,
.amaly-footer__links .service-text,
.amaly-brands__label,
.amaly-breadcrumb li,
.amaly-contact-form__label,
.amaly-contact-form__input,
.amaly-contact-form__textarea,
.lang-toggle__option,
.amaly-modal__subtitle,
.amaly-feature-card__text,
.amaly-feature-card__link,
.amaly-counter-card__label,
.amaly-about__badge-label,
.amaly-about__author-role,
.amaly-cta__text,
.header-btn .btn,
.header-btn .amaly-btn {
  font-family: var(--font-body) !important;
}


/* ==========================================================================
   2. LOADER (loader_ract) — CSS Pure Animated Rectangles
   ========================================================================== */

/* Hide the OLD preloader completely */
.amaly-preloader {
  display: none !important;
}

/* New loader — full-screen rectangle bar wipe */
.loader {
  position: fixed;
  inset: 0;
  background: #06060e;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              visibility 0.7s;
}

body.loaded .loader {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.loader_ract {
  position: relative;
  width: 280px;
  height: 160px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
}

.loader_ract__item {
  height: 4px;
  border-radius: 0;
  position: relative;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.03);
}

/* Left-sliding bars — using transform for GPU acceleration */
.loader_ract__item.is-left::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, #0066FF 40%, #3385FF 70%, transparent);
  will-change: transform;
  animation: loaderSlideLeft 1.6s cubic-bezier(0.25, 1, 0.5, 1) infinite;
}

/* Right-sliding bars — using transform for GPU acceleration */
.loader_ract__item.is-right::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 45%;
  height: 100%;
  background: linear-gradient(270deg, transparent, #0066FF 40%, #3385FF 70%, transparent);
  will-change: transform;
  animation: loaderSlideRight 1.6s cubic-bezier(0.25, 1, 0.5, 1) infinite;
}

/* Staggered delays and varying widths for visual interest */
.loader_ract__item:nth-child(1) { width: 100%; }
.loader_ract__item:nth-child(1)::after { animation-delay: 0s; }

.loader_ract__item:nth-child(2) { width: 85%; margin-left: auto; }
.loader_ract__item:nth-child(2)::after { animation-delay: 0.1s; }

.loader_ract__item:nth-child(3) { width: 95%; }
.loader_ract__item:nth-child(3)::after { animation-delay: 0.2s; }

.loader_ract__item:nth-child(4) { width: 75%; margin-left: auto; }
.loader_ract__item:nth-child(4)::after { animation-delay: 0.3s; }

.loader_ract__item:nth-child(5) { width: 100%; }
.loader_ract__item:nth-child(5)::after { animation-delay: 0.15s; }

.loader_ract__item:nth-child(6) { width: 90%; margin-left: auto; }
.loader_ract__item:nth-child(6)::after { animation-delay: 0.25s; }

.loader_ract__item:nth-child(7) { width: 80%; }
.loader_ract__item:nth-child(7)::after { animation-delay: 0.35s; }

.loader_ract__item:nth-child(8) { width: 100%; margin-left: auto; }
.loader_ract__item:nth-child(8)::after { animation-delay: 0.05s; }

.loader_ract__item:nth-child(9) { width: 70%; }
.loader_ract__item:nth-child(9)::after { animation-delay: 0.4s; }

.loader_ract__item:nth-child(10) { width: 95%; margin-left: auto; }
.loader_ract__item:nth-child(10)::after { animation-delay: 0.18s; }

.loader_ract__item:nth-child(11) { width: 88%; }
.loader_ract__item:nth-child(11)::after { animation-delay: 0.28s; }

.loader_ract__item:nth-child(12) { width: 100%; margin-left: auto; }
.loader_ract__item:nth-child(12)::after { animation-delay: 0.12s; }

@keyframes loaderSlideLeft {
  0%   { transform: translateX(-170%); opacity: 0; }
  20%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { transform: translateX(330%); opacity: 0; }
}

@keyframes loaderSlideRight {
  0%   { transform: translateX(220%); opacity: 0; }
  20%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { transform: translateX(-330%); opacity: 0; }
}

/* Loader brand text */
.loader__brand {
  position: absolute;
  bottom: -48px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.5em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.15);
}


/* ==========================================================================
   3. HERO — CENTERED + FAST MODERN ENTRANCE
   ========================================================================== */

/* Force perfect centering */
.amaly-hero__content {
  text-align: center !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.amaly-hero__content .amaly-tag {
  margin-left: auto;
  margin-right: auto;
}

.amaly-hero__title {
  text-align: center !important;
  width: 100%;
}

.amaly-hero__text {
  text-align: center !important;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

.amaly-hero__actions {
  justify-content: center !important;
  display: flex;
}

/* --- Initial hidden state --- */
.amaly-hero__content .amaly-tag,
.amaly-hero__title,
.amaly-hero__title .char,
.amaly-hero__title .word-wrap,
.amaly-hero__text,
.amaly-hero__actions {
  opacity: 0;
}

/* --- Tag — clip-path wipe from left --- */
body.loaded .amaly-hero__content .amaly-tag {
  animation: heroClipReveal 0.5s cubic-bezier(0.77, 0, 0.175, 1) 0.1s forwards;
}

/* --- Title — each char clips in from bottom, FAST stagger --- */
body.loaded .amaly-hero__title {
  opacity: 1;
}

body.loaded .amaly-hero__title .char {
  display: inline-block;
  animation: heroCharClip 0.4s cubic-bezier(0.77, 0, 0.175, 1) forwards;
}

/* Fast stagger: starts at 0.15s, +15ms per char → all done by ~0.6s */
body.loaded .amaly-hero__title .char:nth-child(1)  { animation-delay: 0.15s; }
body.loaded .amaly-hero__title .char:nth-child(2)  { animation-delay: 0.165s; }
body.loaded .amaly-hero__title .char:nth-child(3)  { animation-delay: 0.18s; }
body.loaded .amaly-hero__title .char:nth-child(4)  { animation-delay: 0.195s; }
body.loaded .amaly-hero__title .char:nth-child(5)  { animation-delay: 0.21s; }
body.loaded .amaly-hero__title .char:nth-child(6)  { animation-delay: 0.225s; }
body.loaded .amaly-hero__title .char:nth-child(7)  { animation-delay: 0.24s; }
body.loaded .amaly-hero__title .char:nth-child(8)  { animation-delay: 0.255s; }
body.loaded .amaly-hero__title .char:nth-child(9)  { animation-delay: 0.27s; }
body.loaded .amaly-hero__title .char:nth-child(10) { animation-delay: 0.285s; }
body.loaded .amaly-hero__title .char:nth-child(11) { animation-delay: 0.30s; }
body.loaded .amaly-hero__title .char:nth-child(12) { animation-delay: 0.315s; }
body.loaded .amaly-hero__title .char:nth-child(13) { animation-delay: 0.33s; }
body.loaded .amaly-hero__title .char:nth-child(14) { animation-delay: 0.345s; }
body.loaded .amaly-hero__title .char:nth-child(15) { animation-delay: 0.36s; }
body.loaded .amaly-hero__title .char:nth-child(16) { animation-delay: 0.375s; }
body.loaded .amaly-hero__title .char:nth-child(17) { animation-delay: 0.39s; }
body.loaded .amaly-hero__title .char:nth-child(18) { animation-delay: 0.405s; }
body.loaded .amaly-hero__title .char:nth-child(19) { animation-delay: 0.42s; }
body.loaded .amaly-hero__title .char:nth-child(20) { animation-delay: 0.435s; }
body.loaded .amaly-hero__title .char:nth-child(21) { animation-delay: 0.45s; }
body.loaded .amaly-hero__title .char:nth-child(22) { animation-delay: 0.465s; }
body.loaded .amaly-hero__title .char:nth-child(23) { animation-delay: 0.48s; }
body.loaded .amaly-hero__title .char:nth-child(24) { animation-delay: 0.495s; }
body.loaded .amaly-hero__title .char:nth-child(25) { animation-delay: 0.51s; }
body.loaded .amaly-hero__title .char:nth-child(26) { animation-delay: 0.525s; }
body.loaded .amaly-hero__title .char:nth-child(27) { animation-delay: 0.54s; }
body.loaded .amaly-hero__title .char:nth-child(28) { animation-delay: 0.555s; }
body.loaded .amaly-hero__title .char:nth-child(29) { animation-delay: 0.57s; }
body.loaded .amaly-hero__title .char:nth-child(30) { animation-delay: 0.585s; }
body.loaded .amaly-hero__title .char:nth-child(n+31) { animation-delay: 0.60s; }

/* Word-level fallback — fast stagger */
body.loaded .amaly-hero__title .word {
  display: inline-block;
  animation: heroCharClip 0.4s cubic-bezier(0.77, 0, 0.175, 1) forwards;
}
body.loaded .amaly-hero__title .word:nth-child(1) { animation-delay: 0.15s; }
body.loaded .amaly-hero__title .word:nth-child(2) { animation-delay: 0.22s; }
body.loaded .amaly-hero__title .word:nth-child(3) { animation-delay: 0.29s; }
body.loaded .amaly-hero__title .word:nth-child(4) { animation-delay: 0.36s; }
body.loaded .amaly-hero__title .word:nth-child(5) { animation-delay: 0.43s; }
body.loaded .amaly-hero__title .word:nth-child(6) { animation-delay: 0.50s; }
body.loaded .amaly-hero__title .word:nth-child(7) { animation-delay: 0.55s; }
body.loaded .amaly-hero__title .word:nth-child(8) { animation-delay: 0.60s; }

/* --- Paragraph — fast mask reveal --- */
body.loaded .amaly-hero__text {
  animation: heroClipReveal 0.6s cubic-bezier(0.77, 0, 0.175, 1) 0.5s forwards;
}

/* --- CTA button — scale + fade, snappy --- */
body.loaded .amaly-hero__actions {
  animation: heroBtnReveal 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.65s forwards;
}

/* --- Keyframes --- */
@keyframes heroClipReveal {
  0%   { opacity: 0; clip-path: inset(0 100% 0 0); }
  100% { opacity: 1; clip-path: inset(0 0 0 0); }
}

@keyframes heroCharClip {
  0%   { opacity: 0; transform: translateY(100%) rotateX(-80deg); filter: blur(4px); }
  60%  { filter: blur(0); }
  100% { opacity: 1; transform: translateY(0) rotateX(0deg); filter: blur(0); }
}

@keyframes heroBtnReveal {
  0%   { opacity: 0; transform: scale(0.85); }
  100% { opacity: 1; transform: scale(1); }
}


/* ==========================================================================
   4. SERVICES SECTION — Dramatic Animated Title
   ========================================================================== */

/* Animated title — word reveal with clip-path wipe */
.amaly-services__title-animated .word-reveal {
  display: inline-block;
  clip-path: inset(0 100% 0 0);
  opacity: 0;
  transition: clip-path 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.animate-in .amaly-services__title-animated .word-reveal {
  clip-path: inset(0 0 0 0);
  opacity: 1;
  transform: translateY(0);
}

/* Stagger the word reveal */
.animate-in .amaly-services__title-animated .word-reveal:nth-child(1) { transition-delay: 0.05s; }
.animate-in .amaly-services__title-animated .word-reveal:nth-child(2) { transition-delay: 0.12s; }
.animate-in .amaly-services__title-animated .word-reveal:nth-child(3) { transition-delay: 0.19s; }
.animate-in .amaly-services__title-animated .word-reveal:nth-child(4) { transition-delay: 0.26s; }
.animate-in .amaly-services__title-animated .word-reveal:nth-child(5) { transition-delay: 0.33s; }
.animate-in .amaly-services__title-animated .word-reveal:nth-child(6) { transition-delay: 0.40s; }
.animate-in .amaly-services__title-animated .word-reveal:nth-child(7) { transition-delay: 0.47s; }
.animate-in .amaly-services__title-animated .word-reveal:nth-child(8) { transition-delay: 0.54s; }
.animate-in .amaly-services__title-animated .word-reveal:nth-child(9) { transition-delay: 0.61s; }

/* Number highlight — dramatic entrance */
.number-highlight {
  display: inline-block;
  color: var(--accent);
  position: relative;
  transform: scale(0.5);
  opacity: 0;
  transition: transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1),
              opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              text-shadow 0.6s ease;
}

.animate-in .number-highlight,
.revealed .number-highlight,
.number-highlight.is-visible {
  transform: scale(1);
  opacity: 1;
  text-shadow:
    0 0 20px rgba(0, 102, 255, 0.4),
    0 0 40px rgba(0, 102, 255, 0.15);
}

/* Overshoot animation for numbers */
@keyframes numberPop {
  0%   { transform: scale(0.5); opacity: 0; }
  60%  { transform: scale(1.12); opacity: 1; }
  80%  { transform: scale(0.97); }
  100% { transform: scale(1); opacity: 1; }
}

.animate-in .number-highlight,
.revealed .number-highlight {
  animation: numberPop 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s both;
}

/* Glow pulse on numbers after entrance */
@keyframes numberGlow {
  0%, 100% { text-shadow: 0 0 20px rgba(0, 102, 255, 0.3), 0 0 40px rgba(0, 102, 255, 0.1); }
  50%      { text-shadow: 0 0 30px rgba(0, 102, 255, 0.5), 0 0 60px rgba(0, 102, 255, 0.2); }
}

.animate-in .number-highlight,
.revealed .number-highlight {
  animation: numberPop 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s both,
             numberGlow 3s ease-in-out 1.5s infinite;
}

/* Gradient text on key words */
.gradient-text {
  background: linear-gradient(135deg, var(--accent) 0%, #6366f1 50%, var(--accent) 100%);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradientShift 4s ease infinite;
}

@keyframes gradientShift {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}


/* ==========================================================================
   5. REMOVE SCROLL INDICATOR
   ========================================================================== */

.amaly-hero__scroll-indicator {
  display: none !important;
}


/* ==========================================================================
   6. FOOTER SERVICES — Plain Text Styling
   ========================================================================== */

.amaly-footer__links .service-text {
  color: var(--text-muted);
  display: block;
  padding: 4px 0;
  font-size: 0.95rem;
  cursor: default;
  font-family: var(--font-body);
  transition: none;
}

.amaly-footer__links .service-text:hover {
  color: var(--text-muted);
  transform: none;
}


/* ==========================================================================
   7. MODERNIZATION — Creative Tech Aesthetic
   ========================================================================== */

/* --- Tighter, sharper letter-spacing on headings --- */
.amaly-hero__title {
  letter-spacing: -0.04em !important;
}

.amaly-section__title {
  letter-spacing: -0.03em !important;
}

.amaly-cta__title {
  letter-spacing: -0.03em !important;
}

.amaly-feature-card__title {
  letter-spacing: -0.02em !important;
}

/* --- Sharp card borders — reduce border-radius for tech feel --- */
.amaly-card {
  border-radius: 4px;
}

.amaly-section--pearl .amaly-card {
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, 0.06);
}

.amaly-card__icon {
  border-radius: 4px;
}

/* Feature cards — sharper corners */
.amaly-feature-card {
  border-radius: 6px;
}

.amaly-feature-card__inner {
  border-radius: 6px;
}

.amaly-feature-card__front,
.amaly-feature-card__back {
  border-radius: 6px;
}

/* Counter cards — sharper */
.amaly-counter-card {
  border-radius: 4px;
}

.amaly-counter-card__icon {
  border-radius: 4px;
}

/* Contact info cards */
.amaly-contact-info__card {
  border-radius: 4px;
}

.amaly-contact-info__icon {
  border-radius: 4px;
}

/* CTA inner */
.amaly-cta__inner {
  border-radius: 6px;
}

/* About images — sharper */
.amaly-about__img-primary,
.amaly-about__img-primary img {
  border-radius: 6px;
}

.amaly-about__img-secondary {
  border-radius: 4px;
}

.amaly-about__img-secondary img {
  border-radius: 2px;
}

/* Badge sharper */
.amaly-about__badge {
  border-radius: 4px;
}

/* --- Geometric section dividers --- */
.amaly-section--pearl + .amaly-section--light::before,
.amaly-section--light + .amaly-section--pearl::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  width: 100%;
  height: 60px;
  background: inherit;
  clip-path: polygon(0 0, 100% 0, 100% 40%, 0 100%);
  z-index: 2;
}

/* Diagonal top edge for sections — subtle geometric cut */
.amaly-services::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, transparent 0%, var(--accent) 20%, var(--accent) 80%, transparent 100%);
  opacity: 0.15;
}

.amaly-features::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, transparent 0%, var(--accent) 30%, var(--accent) 70%, transparent 100%);
  opacity: 0.12;
}

/* --- Subtle noise/grain overlay on the hero --- */
.amaly-hero__content::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.025;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 256px 256px;
  mix-blend-mode: overlay;
}

/* Scope the grain to the hero only */
.amaly-hero {
  isolation: isolate;
}

/* --- Electric accent feel — pulsing glow on hover for primary buttons --- */
.amaly-btn--primary {
  box-shadow: 0 4px 24px rgba(0, 102, 255, 0.3);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.amaly-btn--primary:hover {
  box-shadow:
    0 8px 32px rgba(0, 102, 255, 0.4),
    0 0 0 1px rgba(0, 102, 255, 0.15);
}

/* --- Accent border-left on cards on hover for a "selection" feel --- */
.amaly-section--pearl .amaly-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 100%;
  background: var(--accent);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.amaly-section--pearl .amaly-card:hover::after {
  transform: scaleY(1);
  transform-origin: top;
}

/* --- Monospace numbers for a tech look --- */
.amaly-counter-card__number,
.amaly-about__badge-number,
.amaly-card__number,
.amaly-skill-item__percent {
  font-variant-numeric: tabular-nums;
}

/* --- Subtle horizontal rule between sections --- */
.amaly-cta::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  max-width: 900px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.06), transparent);
}

/* Geometric accent removed — conflicts with centered layout */

/* --- Services cards stagger entrance override with sharper motion --- */
.amaly-section--pearl .amaly-card {
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.3s ease;
}

/* --- Scroll progress accent line at top of page (purely decorative, CSS-only) --- */
/* Uses a subtle top border on sticky header */
.header-section.sticky::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), #6366f1, var(--accent));
  background-size: 200% 100%;
  animation: headerAccentShift 3s ease infinite;
  opacity: 0.6;
}

@keyframes headerAccentShift {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

/* --- Skill bars — sharper with no radius --- */
.amaly-skill-bar {
  border-radius: 0;
  height: 4px;
}

.amaly-skill-bar__fill {
  border-radius: 0;
}

/* --- Tag style — sharper, more geometric --- */
.amaly-tag {
  border-radius: 2px;
  letter-spacing: 0.15em;
  font-size: 0.78rem;
  padding: 7px 18px;
}

.amaly-tag--dark {
  border-radius: 2px;
}

/* --- CTA section — sharper with diagonal accent --- */
.amaly-cta__inner::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    135deg,
    transparent 40%,
    rgba(255, 255, 255, 0.04) 40%,
    rgba(255, 255, 255, 0.04) 41%,
    transparent 41%
  );
  pointer-events: none;
}

/* --- Marquee items — sharper style override --- */
.amaly-marquee__item img {
  filter: grayscale(1) brightness(0.8);
  transition: filter 0.4s ease;
}

.amaly-marquee__item:hover img {
  filter: grayscale(0) brightness(1);
}

/* --- Footer — add subtle top line --- */
.amaly-footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--glass-border), transparent);
}

/* --- Social icons sharper --- */
.amaly-footer__social a {
  border-radius: 4px;
}


/* ==========================================================================
   8. TEAM SECTION — Circular Vignettes
   ========================================================================== */

.amaly-team__grid {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 2.5rem;
  max-width: 960px;
  margin: 0 auto;
}

.amaly-team__member {
  flex: 1 1 0;
  max-width: 220px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0;
  margin: 0;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s var(--ease-out-expo), transform 0.6s var(--ease-out-expo);
}

.amaly-team__member.cascade-visible {
  opacity: 1;
  transform: translateY(0);
}

.amaly-team__photo {
  width: 160px;
  height: 160px;
  min-width: 160px;
  min-height: 160px;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 0 1.2rem 0;
  border: 3px solid var(--accent);
  box-shadow: 0 0 0 6px rgba(0, 102, 255, 0.08);
  transition: box-shadow 0.4s ease, transform 0.4s var(--ease-out-expo);
}

.amaly-team__member:hover .amaly-team__photo {
  box-shadow: 0 0 0 8px rgba(0, 102, 255, 0.15), 0 8px 32px rgba(0, 0, 0, 0.1);
  transform: scale(1.04);
}

.amaly-team__photo img {
  display: block;
  width: 160px;
  height: 160px;
  object-fit: cover;
  object-position: center 20%;
  filter: grayscale(0.15);
  transition: filter 0.4s ease;
}

.amaly-team__member:hover .amaly-team__photo img {
  filter: grayscale(0);
}

/* Gael zoom — full-body photo needs scale + crop */
.amaly-team__photo--zoom img {
  object-position: center 5%;
  transform: scale(1.8);
  transform-origin: center 8%;
}

@media (max-width: 575px) {
  .amaly-team__photo--zoom img {
    transform: scale(1.6);
  }
}

.amaly-team__name {
  font-family: var(--font-display) !important;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-dark);
  margin: 0 0 0.2rem 0;
  padding: 0;
  letter-spacing: -0.02em;
  line-height: 1.3;
}

.amaly-team__role {
  display: inline-block;
  font-family: var(--font-body) !important;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin: 0 0 0.8rem 0;
  padding: 0;
}

.amaly-team__bio {
  font-family: var(--font-body) !important;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--text-dark-muted);
  margin: 0;
  padding: 0;
}

@media (max-width: 991px) {
  .amaly-team__grid {
    flex-wrap: wrap;
    gap: 2rem;
  }

  .amaly-team__member {
    flex: 0 0 calc(50% - 1rem);
    max-width: calc(50% - 1rem);
  }
}

@media (max-width: 575px) {
  .amaly-team__grid {
    flex-direction: column;
    align-items: center;
    gap: 2.5rem;
  }

  .amaly-team__member {
    flex: none;
    max-width: 280px;
    width: 100%;
  }

  .amaly-team__photo {
    width: 140px;
    height: 140px;
    min-width: 140px;
    min-height: 140px;
  }

  .amaly-team__photo img {
    width: 140px;
    height: 140px;
  }
}


/* ==========================================================================
   9. RESPONSIVE OVERRIDES — Full Mobile-First
   ========================================================================== */

/* ── Tablet (max 991px) ────────────────────────────────── */
@media (max-width: 991px) {
  .loader_ract {
    width: 200px;
    height: 120px;
  }

  .amaly-feature-card {
    aspect-ratio: 4/5;
  }

  /* Hero — reduce padding, fluid title */
  .amaly-hero {
    padding-top: 100px !important;
    padding-bottom: 60px !important;
    min-height: auto !important;
  }

  .amaly-hero__title {
    font-size: clamp(2.2rem, 5vw, 3.5rem) !important;
  }

  .amaly-hero__text {
    font-size: 1rem;
    max-width: 90%;
  }

  /* Services grid — 2 columns */
  .amaly-services__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* About — stack images above text */
  .amaly-about__images {
    margin-bottom: 2rem;
  }

  /* Skills — full width bars */
  .amaly-skills__left,
  .amaly-skills__right {
    padding: 0;
  }

  /* CTA */
  .amaly-cta__title {
    font-size: clamp(1.5rem, 4vw, 2.5rem) !important;
  }

  /* Section titles fluid */
  .amaly-section__title {
    font-size: clamp(1.6rem, 4vw, 2.8rem) !important;
  }
}

/* ── Large phones (max 767px) ──────────────────────────── */
@media (max-width: 767px) {
  .loader_ract {
    width: 160px;
    height: 100px;
    gap: 5px;
  }

  .loader_ract__item {
    height: 3px;
  }

  /* Hero — compact mobile */
  .amaly-hero {
    padding-top: 80px !important;
    padding-bottom: 50px !important;
  }

  .amaly-hero__title {
    font-size: clamp(1.8rem, 7.5vw, 2.8rem) !important;
    line-height: 1.15 !important;
  }

  .amaly-hero__text {
    font-size: 0.95rem;
    max-width: 100%;
    padding: 0 4px;
  }

  .amaly-hero__actions {
    flex-direction: column !important;
    gap: 12px !important;
    width: 100%;
  }

  .amaly-hero__actions .amaly-btn {
    width: 100%;
    text-align: center;
    justify-content: center;
  }

  /* Services — single column */
  .amaly-services__grid {
    grid-template-columns: 1fr !important;
    gap: 16px;
  }

  /* Cards */
  .amaly-card {
    padding: 24px 20px;
  }

  /* Features — single column */
  .amaly-features__grid {
    grid-template-columns: 1fr !important;
  }

  .amaly-feature-card {
    aspect-ratio: 16/10;
  }

  /* About badge */
  .amaly-about__badge {
    padding: 12px 16px;
  }

  .amaly-about__badge-number {
    font-size: 2rem;
  }

  /* Section padding reduce */
  .amaly-section {
    padding: 60px 0 !important;
  }

  /* Section titles */
  .amaly-section__title {
    font-size: clamp(1.4rem, 6vw, 2.2rem) !important;
  }

  /* CTA */
  .amaly-cta__inner {
    padding: 40px 20px;
    border-radius: 12px;
  }

  .amaly-cta__title {
    font-size: clamp(1.3rem, 5.5vw, 2rem) !important;
  }

  /* Footer — stack columns */
  .amaly-footer__top .row > div {
    margin-bottom: 1.5rem;
  }

  .amaly-footer__bottom {
    flex-direction: column;
    gap: 12px;
    text-align: center;
  }

  /* Marquee smaller */
  .amaly-marquee__item img {
    height: 28px;
  }

  /* Counters — 2 col */
  .amaly-counters__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .amaly-counter-card__number {
    font-size: 2.5rem;
  }

  /* Page banner */
  .amaly-page-banner {
    padding: 120px 0 50px !important;
  }

  .amaly-page-banner__title {
    font-size: clamp(2rem, 8vw, 3rem) !important;
  }

  /* Modal */
  .amaly-modal {
    padding: 24px 16px;
  }

  .amaly-contact-form__row {
    flex-direction: column;
  }

  /* Header sticky line thinner */
  .header-section.sticky::after {
    height: 1px;
  }

  /* Tags smaller */
  .amaly-tag {
    font-size: 0.72rem;
    padding: 5px 14px;
  }

  /* Skill bars */
  .amaly-skill-item__title {
    font-size: 0.9rem;
  }
}

/* ── Small phones (max 575px) ──────────────────────────── */
@media (max-width: 575px) {
  .loader_ract {
    width: 130px;
    height: 80px;
    gap: 4px;
  }

  .loader_ract__item {
    height: 2px;
  }

  /* Hero ultra compact */
  .amaly-hero__title {
    font-size: clamp(1.5rem, 8vw, 2.2rem) !important;
  }

  .amaly-hero__text {
    font-size: 0.9rem;
  }

  /* Buttons — full width stacked */
  .amaly-btn {
    padding: 14px 24px;
    font-size: 0.9rem;
    width: 100%;
    text-align: center;
  }

  /* Cards tighter */
  .amaly-card {
    padding: 20px 16px;
  }

  .amaly-card__icon {
    width: 48px;
    height: 48px;
    font-size: 1.1rem;
  }

  /* About images — narrower secondary */
  .amaly-about__images {
    padding-right: 20px;
    padding-bottom: 20px;
  }

  .amaly-about__img-secondary {
    width: 45%;
  }

  /* Trust signals stack */
  .amaly-about__trust-signals {
    flex-direction: column;
    gap: 6px;
  }

  /* Counters — single col on tiny screens */
  .amaly-counters__grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  /* Section titles */
  .amaly-section__title {
    font-size: clamp(1.2rem, 6.5vw, 1.8rem) !important;
  }

  /* Footer links */
  .amaly-footer__links li {
    margin-bottom: 6px;
  }

  /* Modal full-width pills */
  .amaly-modal__services {
    gap: 6px;
  }

  .amaly-service-pill span {
    font-size: 0.8rem;
  }

  /* Contact cards single col */
  .amaly-contact-info__grid {
    grid-template-columns: 1fr;
  }
}

/* ── Ultra small (max 380px) ───────────────────────────── */
@media (max-width: 380px) {
  .amaly-hero__title {
    font-size: 1.4rem !important;
  }

  .amaly-hero__text {
    font-size: 0.85rem;
  }

  .amaly-section__title {
    font-size: 1.15rem !important;
  }

  .amaly-team__photo,
  .amaly-team__photo img {
    width: 120px !important;
    height: 120px !important;
    min-width: 120px !important;
    min-height: 120px !important;
  }

  .container {
    padding-left: 16px;
    padding-right: 16px;
  }
}


/* ==========================================================================
   9. PREFERS-REDUCED-MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  /* Loader — instant show/hide, no animation */
  .loader {
    transition: none;
  }

  .loader_ract__item.is-left::after,
  .loader_ract__item.is-right::after {
    animation: none;
    opacity: 1;
    transform: none;
    width: 100%;
    background: var(--accent);
  }

  /* Hero entrance — instant reveal */
  .amaly-hero__content .amaly-tag,
  .amaly-hero__title,
  .amaly-hero__title .char,
  .amaly-hero__title .word,
  .amaly-hero__title .word-wrap,
  .amaly-hero__text,
  .amaly-hero__actions {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    clip-path: none !important;
    filter: none !important;
  }

  /* Services title — instant reveal */
  .amaly-services__title-animated .word,
  .amaly-services__title-animated .char,
  .amaly-services__title-animated .word-reveal {
    clip-path: none !important;
    opacity: 1 !important;
    transition: none !important;
  }

  .number-highlight {
    transform: none !important;
    opacity: 1 !important;
    animation: none !important;
    text-shadow: none !important;
  }

  .gradient-text {
    animation: none !important;
    -webkit-text-fill-color: var(--accent);
  }

  /* Header accent line — static */
  .header-section.sticky::after {
    animation: none;
    background: var(--accent);
    opacity: 0.4;
  }

  /* No number glow */
  .revealed .number-highlight {
    animation: none !important;
  }
}