/* =====================================================================
   Enyo Global — Visual Refresh (2026)
   Override-only stylesheet. Loaded after main.css on every page.
   Touches: color palette, typography, buttons, cards, hero, header,
            sections, footer, scroll-to-top.
   No markup changes required.
   ===================================================================== */

/* ---------- 1. Modern font + tokens ---------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Space+Grotesk:wght@500;600;700&display=swap');

:root {
  /* Refined palette — refined navy/indigo + warm accent */
  --rf-bg:        #ffffff;
  --rf-surface:   #f7f8fb;
  --rf-ink:       #0b1020;
  --rf-ink-soft:  #4a5168;
  --rf-muted:     #8a91a7;
  --rf-line:      rgba(11, 16, 32, 0.08);

  --rf-primary:        #4f46e5;       /* indigo 600 */
  --rf-primary-strong: #3b32d6;
  --rf-primary-soft:   #eef0ff;
  --rf-accent:         #ffb547;       /* amber */
  --rf-success:        #10b981;

  --rf-grad-primary: linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #ec4899 100%);
  --rf-grad-dark:    linear-gradient(135deg, #0b1020 0%, #1a1f3a 60%, #2a1f55 100%);
  --rf-grad-mesh:    radial-gradient(1200px 600px at 10% -10%, rgba(124,58,237,0.18), transparent 60%),
                     radial-gradient(900px  500px at 90% 10%,  rgba(79,70,229,0.22),  transparent 60%),
                     radial-gradient(700px  500px at 50% 110%, rgba(236,72,153,0.16), transparent 60%);

  --rf-radius-sm: 10px;
  --rf-radius:    16px;
  --rf-radius-lg: 24px;
  --rf-radius-pill: 999px;

  --rf-shadow-sm: 0 2px 8px rgba(11,16,32,0.06);
  --rf-shadow:    0 12px 40px rgba(11,16,32,0.10);
  --rf-shadow-lg: 0 24px 60px rgba(11,16,32,0.16);
  --rf-shadow-primary: 0 18px 40px rgba(79,70,229,0.30);

  --rf-ease: cubic-bezier(.2,.8,.2,1);

  /* Override existing tokens used across main.css so the whole site shifts */
  --theme-font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mont: 'Space Grotesk', 'Inter', sans-serif;
  --primary-color: var(--rf-primary);
  --secondary-color: var(--rf-ink);
  --tertiary-color: var(--rf-ink-soft);
  --quaternary-color: var(--rf-accent);
  --quinary-color: var(--rf-surface);
  --theme-color: var(--rf-ink-soft);
  --theme-bg: var(--rf-bg);
  --shadow: var(--rf-shadow);
  --shadow-secondary: var(--rf-shadow-sm);
}

/* ---------- 2. Global typography ------------------------------------- */
html { scroll-behavior: smooth; }
body {
  font-family: var(--theme-font);
  font-feature-settings: "ss01", "cv11";
  color: var(--rf-ink-soft);
  background: var(--rf-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--mont);
  color: var(--rf-ink);
  letter-spacing: -0.02em;
  line-height: 1.12;
}
h1, .h1 { font-weight: 700; letter-spacing: -0.035em; }

p { line-height: 1.7; }

::selection { background: var(--rf-primary); color: #fff; }

/* ---------- 3. Buttons ----------------------------------------------- */
.alter-btn,
a.btn,
button.btn,
.tp-btn,
.thm-btn {
  position: relative;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 16px 28px !important;
  font-family: var(--mont);
  font-weight: 600;
  font-size: 15px;
  line-height: 1;
  letter-spacing: 0.01em;
  border-radius: var(--rf-radius-pill) !important;
  border: 0 !important;
  color: #fff !important;
  background: var(--rf-grad-primary) !important;
  background-size: 180% 180% !important;
  background-position: 0% 50%;
  box-shadow: var(--rf-shadow-primary);
  transition: transform .35s var(--rf-ease),
              box-shadow .35s var(--rf-ease),
              background-position .6s var(--rf-ease);
  overflow: hidden;
  white-space: nowrap;
  text-align: center;
  transform: none !important;
}
.alter-btn:hover,
a.btn:hover,
button.btn:hover,
.tp-btn:hover,
.thm-btn:hover {
  background-position: 100% 50% !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 26px 50px rgba(79,70,229,0.40);
  color: #fff !important;
}
/* Kill the absolutely-positioned reveal-circle span from .btn-anim */
.alter-btn > span:empty,
.alter-btn > span:not(.material-symbols-outlined):not([class]),
a.btn > span:empty,
.tp-btn > span:empty {
  display: none !important;
}
.alter-btn i { color: inherit; }

/* Ghost / outline variant (.btn-line.text-uppercase) */
.btn-line {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  font-family: var(--mont);
  font-weight: 600;
  letter-spacing: 0.04em;
  border-radius: var(--rf-radius-pill);
  background: transparent;
  color: var(--rf-ink) !important;
  border: 1.5px solid var(--rf-ink);
  transition: background .3s var(--rf-ease), color .3s var(--rf-ease), transform .3s var(--rf-ease);
}
.btn-line:hover {
  background: var(--rf-ink);
  color: #fff !important;
  transform: translateY(-2px);
}


/* Header "Let's Talk" pill */
.navbar__options a {
  background: var(--rf-ink);
  color: #fff !important;
  padding: 11px 22px;
  border-radius: var(--rf-radius-pill);
  font-weight: 600;
  font-family: var(--mont);
  letter-spacing: 0.01em;
  transition: transform .3s var(--rf-ease), background .3s var(--rf-ease);
}
.navbar__options a:hover {
  background: var(--rf-primary);
  transform: translateY(-1px);
}

/* ---------- 4. Header / nav ------------------------------------------ */
.tp-header { z-index: 50; }
.primary-navbar {
  position: sticky;
  top: 0;
  z-index: 50;
  padding: 14px 0;
  background: rgba(255,255,255,0.72);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--rf-line);
}
.navbar__logo img { height: 38px; width: auto; }

.open-offcanvas-nav {
  width: 44px; height: 44px;
  border-radius: var(--rf-radius-pill);
  background: var(--rf-surface);
  border: 1px solid var(--rf-line);
  display: inline-flex; flex-direction: column;
  justify-content: center; align-items: center; gap: 4px;
  margin-left: 12px;
  transition: background .3s var(--rf-ease);
}
.open-offcanvas-nav:hover { background: var(--rf-primary-soft); }
.open-offcanvas-nav .icon-bar { background: var(--rf-ink); height: 2px; width: 18px; border-radius: 2px; }

/* ---------- 5. Hero / banner ----------------------------------------- */
.tp-banner.fix-top {
  position: relative;
  background: var(--rf-grad-dark) !important;
  background-image: var(--rf-grad-dark), var(--rf-grad-mesh) !important;
  background-blend-mode: normal;
  padding-top: 120px;
  padding-bottom: 140px;
  overflow: hidden;
  isolation: isolate;
}
.tp-banner.fix-top::before {
  content: "";
  position: absolute; inset: 0;
  background: var(--rf-grad-mesh);
  pointer-events: none;
  z-index: 0;
}
.tp-banner.fix-top::after {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse at center, black 35%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 35%, transparent 75%);
  pointer-events: none;
  z-index: 0;
}
.tp-banner.fix-top > .container { position: relative; z-index: 2; }
.tp-banner.fix-top .social,
.tp-banner.fix-top .scroll-to { position: relative; z-index: 2; }

.tp-banner__content h1 {
  font-size: clamp(2.5rem, 5.5vw, 5.25rem);
  line-height: 1.04;
  font-weight: 800;
  letter-spacing: -0.045em;
  color: #fff;
}
.tp-banner__content h1 .text-quaternary,
.tp-banner__content h1 span.text-quaternary {
  background: linear-gradient(135deg, #ffd166 0%, #ff8a3d 50%, #ec4899 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent !important;
}
.tp-banner__content h1 img {
  display: inline-block;
  height: 0.8em;
  vertical-align: -0.05em;
  margin: 0 .15em;
  filter: drop-shadow(0 8px 20px rgba(0,0,0,0.35));
}

.tp-banner__users {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 22px 24px;
  border-radius: var(--rf-radius);
}
.tp-banner__avatar img {
  border: 2px solid rgba(255,255,255,0.7);
  width: 44px; height: 44px;
  border-radius: 50%;
  margin-right: -10px;
  box-shadow: 0 6px 14px rgba(0,0,0,0.25);
}

.tp-banner__thumb img {
  border-radius: var(--rf-radius-lg);
  box-shadow: 0 30px 80px rgba(0,0,0,0.45);
}

.tp-banner .social a {
  width: 40px; height: 40px;
  display: inline-grid; place-items: center;
  border-radius: 50%;
  color: #fff;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  transition: background .3s var(--rf-ease), transform .3s var(--rf-ease);
}
.tp-banner .social a:hover {
  background: var(--rf-primary);
  transform: translateY(-2px);
}

.tp-banner .scroll-to {
  color: rgba(255,255,255,0.7);
  font-family: var(--mont);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 11px;
}

/* Hero CTA on dark bg — solid white pill for contrast */
.tp-banner .alter-btn {
  background: #ffffff !important;
  color: var(--rf-ink) !important;
  box-shadow: 0 18px 40px rgba(0,0,0,0.30);
}
.tp-banner .alter-btn:hover {
  background: var(--rf-accent) !important;
  color: var(--rf-ink) !important;
}
.tp-banner .alter-btn i { color: var(--rf-primary); }

/* ---------- 6. Section rhythm ---------------------------------------- */
.pt-120 { padding-top: clamp(64px, 9vw, 120px) !important; }
.pb-120 { padding-bottom: clamp(64px, 9vw, 120px) !important; }

section h2,
section .h2 {
  font-size: clamp(1.875rem, 3.4vw, 2.75rem);
  font-weight: 700;
  letter-spacing: -0.03em;
}

/* ---------- 7. Overview / service cards ------------------------------ */
.tp-overview-single {
  background: #fff;
  border: 1px solid var(--rf-line);
  border-radius: var(--rf-radius-lg);
  padding: 22px;
  box-shadow: var(--rf-shadow-sm);
  transition: transform .35s var(--rf-ease),
              box-shadow .35s var(--rf-ease),
              border-color .35s var(--rf-ease);
  overflow: hidden;
  position: relative;
}
.tp-overview-single::before {
  content: "";
  position: absolute; inset: 0;
  background: var(--rf-grad-primary);
  opacity: 0;
  transition: opacity .35s var(--rf-ease);
  z-index: 0;
}
.tp-overview-single > * { position: relative; z-index: 1; }
.tp-overview-single:hover {
  transform: translateY(-6px);
  box-shadow: var(--rf-shadow-lg);
  border-color: transparent;
}
.tp-overview-single:hover::before { opacity: 1; }
.tp-overview-single:hover h4,
.tp-overview-single:hover h4 a,
.tp-overview-single:hover p,
.tp-overview-single:hover .cta a { color: #fff !important; }

.tp-overview-single .thumb {
  border-radius: var(--rf-radius);
  overflow: hidden;
  margin-bottom: 16px;
}
.tp-overview-single .thumb img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  transition: transform .8s var(--rf-ease);
}
.tp-overview-single:hover .thumb img { transform: scale(1.06); }

.tp-overview-single .wrapper {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.tp-overview-single .content h4 a {
  color: var(--rf-ink);
  transition: color .3s var(--rf-ease);
}
.tp-overview-single .cta a {
  width: 44px; height: 44px;
  display: inline-grid; place-items: center;
  background: var(--rf-primary-soft);
  color: var(--rf-primary);
  border-radius: 50%;
  transition: background .3s var(--rf-ease), transform .3s var(--rf-ease);
}
.tp-overview-single:hover .cta a {
  background: rgba(255,255,255,0.18);
  color: #fff;
  transform: rotate(-12deg);
}

/* ---------- 8. Story / dark sections --------------------------------- */
.tp-story.bg-black,
section.bg-black,
.bg-black {
  background: var(--rf-grad-dark) !important;
  position: relative;
}
.tp-story.bg-black::before {
  content: "";
  position: absolute; inset: 0;
  background: var(--rf-grad-mesh);
  pointer-events: none;
  opacity: .8;
}
.tp-story.bg-black > .container { position: relative; z-index: 1; }

.tp-story__single {
  padding: 22px 24px;
  border-radius: var(--rf-radius);
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
  margin-bottom: 14px;
  transition: background .3s var(--rf-ease), border-color .3s var(--rf-ease), transform .3s var(--rf-ease);
}
.tp-story__single:hover,
.tp-story__single.active {
  background: rgba(255,255,255,0.07);
  border-color: rgba(124,58,237,0.45);
  transform: translateX(4px);
}
.tp-story__single h5 {
  color: #fff;
  font-weight: 600;
}
.tp-story__single .text-xs {
  color: rgba(255,255,255,0.5);
  letter-spacing: 0.16em;
  font-size: 11px;
  text-transform: uppercase;
}

.tp-story-thumb img {
  border-radius: var(--rf-radius-lg);
  box-shadow: 0 30px 60px rgba(0,0,0,0.45);
}

/* ---------- 9. Testimonial / generic cards --------------------------- */
.tp-testimonial-inner,
.tp-card,
.card {
  border-radius: var(--rf-radius-lg);
  border: 1px solid var(--rf-line);
  background: #fff;
  box-shadow: var(--rf-shadow-sm);
}

/* ---------- 10. Footer ----------------------------------------------- */
footer,
.tp-footer {
  background: var(--rf-grad-dark) !important;
  color: rgba(255,255,255,0.72);
  position: relative;
}
footer a, .tp-footer a {
  color: rgba(255,255,255,0.72);
  transition: color .25s var(--rf-ease);
}
footer a:hover, .tp-footer a:hover { color: #fff; }
footer h2, footer h3, footer h4, footer h5,
.tp-footer h2, .tp-footer h3, .tp-footer h4, .tp-footer h5 {
  color: #fff;
}

/* ---------- 11. Forms ------------------------------------------------ */
input[type=text], input[type=email], input[type=tel], input[type=url],
input[type=search], input[type=password], input[type=number],
textarea, select {
  border-radius: var(--rf-radius);
  border: 1px solid var(--rf-line);
  background: #fff;
  padding: 14px 18px;
  font-family: var(--theme-font);
  color: var(--rf-ink);
  transition: border-color .25s var(--rf-ease), box-shadow .25s var(--rf-ease);
}
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--rf-primary);
  box-shadow: 0 0 0 4px rgba(79,70,229,0.15);
}

/* ---------- 12. Offcanvas menu --------------------------------------- */
/* NOTE: do NOT apply backdrop-filter / transform / filter to .offcanvas-nav —
   it would create a containing block for the fixed-position .offcanvas-menu
   inside, collapsing the full-screen menu to 0 height. */
.offcanvas-nav .offcanvas-menu__wrapper {
  background: var(--rf-grad-dark) !important;
}
.offcanvas-menu__list .navbar__menu a {
  color: rgba(255,255,255,0.85);
  font-family: var(--mont);
  font-weight: 500;
  font-size: 1.5rem;
  letter-spacing: -0.01em;
  transition: color .25s var(--rf-ease), padding .25s var(--rf-ease);
}
.offcanvas-menu__list .navbar__menu a:hover {
  color: var(--rf-accent);
  padding-left: 8px;
}
.close-offcanvas-menu {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.10);
}
.close-offcanvas-menu:hover { background: var(--rf-primary); }

/* ---------- 13. Preloader -------------------------------------------- */
#preloader, .ctn-preloader { background: var(--rf-grad-dark) !important; }
.txt-loading .letters-loading { color: #fff !important; }
.spinner { border-top-color: var(--rf-primary) !important; }

/* ---------- 14. Misc helpers ----------------------------------------- */
img { max-width: 100%; }

.bg-primary { background: var(--rf-primary) !important; }
.text-primary { color: var(--rf-primary) !important; }

/* Tasteful link underlines on body links */
main p a:not(.btn):not(.alter-btn):not(.btn-line) {
  color: var(--rf-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(79,70,229,0.35);
}
main p a:not(.btn):not(.alter-btn):not(.btn-line):hover {
  text-decoration-color: var(--rf-primary);
}

/* Reduce-motion respect */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

/* ---------- 15. Mobile polish ---------------------------------------- */
@media (max-width: 767.98px) {
  .tp-banner.fix-top { padding-top: 80px; padding-bottom: 90px; }
  .tp-banner__content h1 { font-size: clamp(2rem, 9vw, 3rem); }
  .tp-banner__users { padding: 18px; }
  .tp-overview-single .thumb img { height: 180px; }
  .navbar__options a.d-none.d-sm-flex { display: none !important; }
}