/* ==========================================================
   Theme 2.0 — modern look and motion for every page.
   Loaded after style.css and overrides it.
   ========================================================== */

:root {
  --head: 'Outfit', sans-serif;
  --body: 'DM Sans', sans-serif;
  --radius: 16px;
  --amber: #ffb000;
  --grad: linear-gradient(120deg, #e3242b 0%, #ff6a2b 55%, #ffb000 100%);
  --grad-navy: linear-gradient(135deg, #00194e 0%, #0b2f7a 100%);
  --shadow: 0 30px 60px -28px rgba(0, 25, 78, .35);
  --shadow-sm: 0 14px 34px -18px rgba(0, 25, 78, .3);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

html, body { overflow-x: hidden; }
@supports (overflow: clip) { html, body { overflow-x: clip; } }
body { font-size: 16.5px; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
::selection { background: var(--red); color: #fff; }

/* ---------- Typography ---------- */
.section-title {
  font-family: var(--head); font-weight: 800; text-transform: none; letter-spacing: -.8px;
  font-size: clamp(32px, 4.4vw, 54px); line-height: 1.08;
}
.section-title .accent, .page-hero__title .accent, .hx__title .accent {
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
/* when headings are split into animated words, paint the gradient on each word */
.split-ready .accent { background: none; color: inherit; }
.split-ready .accent .w > span { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.section-sub { font-size: 17.5px; line-height: 1.7; }
.eyebrow {
  gap: 10px; padding: 7px 16px 7px 12px; border-radius: 40px; font-family: var(--head); font-size: 12.5px;
  letter-spacing: 2.5px; background: rgba(227, 36, 43, .08); color: var(--red); margin-bottom: 18px;
}
.eyebrow::before { width: 8px; height: 8px; border-radius: 50%; background: currentColor; animation: dotPulse 2s ease-in-out infinite; }
.section-head .eyebrow::after { display: none; }
.section-head--light .eyebrow, .section--dark .eyebrow, .process .eyebrow { background: rgba(255, 255, 255, .08); color: var(--amber); }
.eyebrow--bracket { background: none; padding: 0; }
.eyebrow--bracket::before { width: 110px; height: 3px; border-radius: 3px; animation: none; }
.section-head .eyebrow--bracket::after { display: block; content: ""; width: 110px; height: 3px; border-radius: 3px; background: currentColor; }
@keyframes dotPulse { 0%, 100% { box-shadow: 0 0 0 0 currentColor; opacity: 1; } 50% { box-shadow: 0 0 0 5px transparent; opacity: .6; } }

/* split heading words (added by main.js) */
.js .split-ready .w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .08em; margin-bottom: -.08em; }
.js .split-ready .w > span { display: inline-block; transform: translateY(110%) rotate(4deg); transform-origin: left bottom; transition: transform 1s var(--ease-out); transition-delay: calc(var(--i, 0) * 70ms + .1s); }
.js .is-visible .split-ready .w > span, .js .split-ready.is-visible .w > span { transform: none; }

/* ---------- Buttons ---------- */
.btn {
  border-radius: 60px; padding: 15px 32px; font-family: var(--head); font-weight: 600; font-size: 14.5px;
  letter-spacing: 1px; gap: 10px; isolation: isolate;
}
.btn::after {
  content: ""; position: absolute; top: 0; left: -80%; width: 55%; height: 100%; z-index: 1; pointer-events: none;
  background: linear-gradient(110deg, transparent, rgba(255, 255, 255, .45), transparent); transform: skewX(-20deg);
  transition: left .8s var(--ease-out);
}
.btn:hover::after { left: 130%; }
.btn--primary { background: var(--grad); box-shadow: 0 14px 30px -12px rgba(227, 36, 43, .7); }
.btn--primary::before { background: var(--navy); }
.btn--primary:hover { box-shadow: 0 18px 34px -12px rgba(0, 25, 78, .6); }
.btn--glass {
  background: rgba(255, 255, 255, .1); color: #fff; border: 1px solid rgba(255, 255, 255, .35);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.btn--glass::before { background: #fff; }
.btn--glass:hover { color: var(--navy); }
.btn--glass svg { width: 18px; height: 18px; fill: currentColor; }
.btn__arrow { display: inline-block; transition: transform .4s var(--ease-out); }
.btn:hover .btn__arrow { transform: translateX(5px); }
.btn--magnetic { transition: transform .35s var(--ease-out), box-shadow .35s, color .35s; will-change: transform; }
.link-arrow { font-family: var(--head); letter-spacing: 1.5px; }
.arrow { transition: all .35s var(--ease-out); }
.arrow:hover { transform: scale(1.08); }

/* ---------- Preloader: curtain ---------- */
.preloader { background: transparent; }
.preloader__half { position: absolute; left: 0; right: 0; height: 50.5%; background: var(--grad-navy); transition: transform 1.1s var(--ease-out) .15s; }
.preloader__half--top { top: 0; }
.preloader__half--bottom { bottom: 0; }
.preloader__inner { position: relative; z-index: 1; transition: opacity .4s, transform .5s var(--ease-out); }
.preloader__ring { position: absolute; top: -18px; left: 50%; width: 108px; height: 108px; margin-left: -54px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .1); border-top-color: var(--red); border-right-color: var(--amber); animation: spin 1s linear infinite; }
.preloader.is-done { opacity: 1; visibility: hidden; transition: visibility 0s 1.4s; }
.preloader.is-done .preloader__inner { opacity: 0; transform: scale(.8); }
.preloader.is-done .preloader__half--top { transform: translateY(-100%); }
.preloader.is-done .preloader__half--bottom { transform: translateY(100%); }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Scroll progress ---------- */
.scrollbar { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 300; background: var(--grad); transform: scaleX(0); transform-origin: left; pointer-events: none; }

/* ---------- Header: floating glass bar ---------- */
.header { transition: all .5s var(--ease-out); }
.header .container { max-width: 1400px; }
.header.is-scrolled {
  top: 12px; left: 16px; right: 16px; padding: 10px 0; border-radius: 20px;
  background: rgba(0, 22, 70, .9); backdrop-filter: blur(16px) saturate(150%); -webkit-backdrop-filter: blur(16px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, .08); box-shadow: 0 20px 50px -20px rgba(0, 0, 0, .5);
}
.nav__link { font-family: var(--head); font-size: 15px; font-weight: 500; text-transform: none; letter-spacing: .2px; }
.nav__link::after { height: 3px; border-radius: 3px; background: var(--grad); }
.sub { border-radius: 16px; border-top: 0; padding: 10px; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .35); overflow: hidden; }
.sub::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--grad); }
.sub a { border-radius: 10px; text-transform: none; font-family: var(--head); font-size: 14.5px; letter-spacing: .2px; padding: 10px 16px; }
.has-sub:hover .sub li { animation: subIn .45s var(--ease-out) both; }
.has-sub:hover .sub li:nth-child(2) { animation-delay: .04s; } .has-sub:hover .sub li:nth-child(3) { animation-delay: .08s; }
.has-sub:hover .sub li:nth-child(4) { animation-delay: .12s; } .has-sub:hover .sub li:nth-child(5) { animation-delay: .16s; }
.has-sub:hover .sub li:nth-child(6) { animation-delay: .2s; }
@keyframes subIn { from { opacity: 0; transform: translateX(-10px); } }

.header__call { display: none; align-items: center; gap: 12px; margin-left: 10px; padding: 6px 18px 6px 6px; border-radius: 50px; border: 1px solid rgba(255, 255, 255, .25); color: #fff; font-family: var(--head); font-weight: 600; font-size: 15px; line-height: 1.15; white-space: nowrap; transition: .35s; }
.header__call small { display: block; font-weight: 400; font-size: 11.5px; color: rgba(255, 255, 255, .65); letter-spacing: 1px; text-transform: uppercase; }
.header__call-icon { position: relative; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--grad); flex-shrink: 0; }
.header__call-icon::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid #ff6a2b; animation: ring 2s ease-out infinite; }
.header__call-icon svg { width: 18px; height: 18px; fill: #fff; animation: wiggle 3s ease-in-out infinite; }
.header__call:hover { background: #fff; color: var(--navy); }
.header__call:hover small { color: var(--muted); }
@media (min-width: 1201px) { .header__call { display: inline-flex; } .nav { margin-left: auto; } }

/* ---------- Inner page banner ---------- */
.page-hero { min-height: 480px; overflow: hidden; }
.page-hero::before { background: linear-gradient(110deg, rgba(0, 12, 40, .95) 0%, rgba(0, 25, 78, .8) 50%, rgba(227, 36, 43, .35) 100%); }
.page-hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 64px 64px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 60%); mask-image: linear-gradient(90deg, transparent, #000 60%);
  animation: gridMove 20s linear infinite;
}
.page-hero__title { text-transform: none; letter-spacing: -1px; font-weight: 800; }
.crumbs { display: inline-flex; padding: 8px 18px; border-radius: 40px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .12); backdrop-filter: blur(6px); font-family: var(--head); letter-spacing: 1px; }
@keyframes gridMove { to { background-position: 64px 64px; } }

/* ---------- Rounded, lifted cards ---------- */
.card, .service, .person, .tbox, .info, .post, .policy__block, .vm__card, .mv__card, .chatpanel, .props li, .stat, .value, .logo-tile { border-radius: 20px; }
.service, .post, .svc-link, .gallery__item, .pcard, .about__media img, .split__media img, .map, .map iframe, .tflow__card { border-radius: 20px; overflow: hidden; }
.stats { border-radius: 20px; overflow: hidden; }
.card, .service, .info, .post, .person, .tbox { transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out), border-color .4s; }
.card:hover, .info:hover, .post:hover, .person:hover, .service:hover { transform: translateY(-8px); box-shadow: var(--shadow); }
.card__num { font-family: var(--head); }
.section--soft { background-color: #f4f6fb; background-image: radial-gradient(rgba(0, 25, 78, .07) 1px, transparent 1.2px); background-size: 22px 22px; }
.gallery__tag { border-radius: 0 30px 30px 0; font-family: var(--head); letter-spacing: 1.5px; }
.tab { border-radius: 40px; font-family: var(--head); letter-spacing: 1px; }
.value__icon { transition: transform .5s var(--ease-out), background .4s; }
.card--icon:hover .value__icon, .info:hover .value__icon { transform: rotate(-8deg) scale(1.08); }

/* ---------- Reveal on scroll (variants) ---------- */
.reveal { transform: translateY(46px); filter: blur(6px); transition: opacity 1s var(--ease-out), transform 1s var(--ease-out), filter 1s var(--ease-out); }
.reveal--left { transform: translateX(-70px); }
.reveal--right { transform: translateX(70px); }
.reveal--zoom { transform: scale(.85); }
.reveal.is-visible { opacity: 1; transform: none; filter: none; }
/* wipe-in: the clip goes on the child so the frame itself stays observable */
.reveal--clip { opacity: 1; filter: none; transform: none; }
.reveal--clip > * { clip-path: inset(0 100% 0 0); transition: clip-path 1.4s var(--ease-out) .1s; }
.reveal--clip.is-visible > * { clip-path: inset(0 0 0 0); }

/* ---------- CTA band ---------- */
.cta { background: linear-gradient(115deg, #e3242b, #ff6a2b, #b8141b, #e3242b); background-size: 300% 300%; animation: gradShift 12s ease infinite; }
.cta::before { content: ""; position: absolute; left: -60px; bottom: -90px; width: 220px; height: 220px; border-radius: 50%; background: rgba(255, 255, 255, .08); animation: floatY 7s ease-in-out infinite; }
.cta::after { animation: spin 30s linear infinite; border-style: dashed; }
.cta h2 { text-transform: none; font-weight: 800; letter-spacing: -.5px; }
@keyframes gradShift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes floatY { 50% { transform: translateY(-18px); } }

/* ---------- Footer ---------- */
.footer { position: relative; background: #060d1f; }
.footer::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--grad); background-size: 200% 100%; animation: gradShift 6s linear infinite; }
.footer h2 { font-family: var(--head); text-transform: none; letter-spacing: .3px; font-size: 18px; }
.footer h2::after { height: 3px; border-radius: 3px; background: var(--grad); }
.footer li a { position: relative; }
.footer li a::before { content: "\2192"; position: absolute; left: -16px; opacity: 0; color: var(--red); transition: .3s; }
.footer li a:hover { padding-left: 16px; }
.footer li a:hover::before { left: 0; opacity: 1; }

/* ---------- Floating buttons ---------- */
.fcall { position: fixed; right: 24px; bottom: 24px; z-index: 95; display: flex; align-items: center; flex-direction: row-reverse; gap: 0; color: #fff; }
.fcall__btn { position: relative; z-index: 2; width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center; background: var(--grad); box-shadow: 0 14px 30px -8px rgba(227, 36, 43, .7); transition: transform .4s var(--ease-out); }
.fcall__btn svg { width: 27px; height: 27px; fill: #fff; animation: wiggle 2.6s ease-in-out infinite; }
.fcall__ring { position: absolute; right: 0; bottom: 0; width: 62px; height: 62px; border-radius: 50%; border: 2px solid #ff6a2b; animation: ring 2.4s ease-out infinite; pointer-events: none; }
.fcall__ring--2 { animation-delay: 1.2s; }
.fcall__label { position: relative; z-index: 1; margin-right: -30px; padding: 9px 46px 9px 20px; border-radius: 40px 0 0 40px; background: #fff; color: var(--navy); box-shadow: var(--shadow-sm); font-family: var(--head); line-height: 1.2; white-space: nowrap; max-width: 0; opacity: 0; overflow: hidden; transition: max-width .5s var(--ease-out), opacity .3s, padding .5s; }
.fcall__label small { display: block; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--red); font-weight: 600; }
.fcall__label strong { font-size: 16px; font-weight: 700; }
.fcall:hover .fcall__label, .fcall:focus-visible .fcall__label, .fcall.is-peek .fcall__label { max-width: 260px; opacity: 1; }
.fcall:hover .fcall__btn { transform: scale(1.08) rotate(-8deg); }
@keyframes ring { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(1.7); opacity: 0; } }
@keyframes wiggle { 0%, 70%, 100% { transform: rotate(0); } 74% { transform: rotate(-16deg); } 78% { transform: rotate(14deg); } 82% { transform: rotate(-12deg); } 86% { transform: rotate(10deg); } 90% { transform: rotate(-4deg); } }
.fchat--wa { box-shadow: 0 14px 30px -8px rgba(37, 211, 102, .65); }
.to-top { bottom: 104px; right: 31px; background: var(--navy); box-shadow: var(--shadow-sm); }
.to-top:hover { background: var(--red); }

/* ---------- Chat panel ---------- */
.chatpanel { box-shadow: var(--shadow); border: 0; }
.chatpanel__head { background: var(--grad-navy); }
.chatpanel__icon { background: rgba(227, 36, 43, .08); animation: floatY 4s ease-in-out infinite; }
.chatpanel__icon svg { fill: var(--red); }

/* ---------- Testimonials ---------- */
.tsec { background: radial-gradient(circle at 15% 20%, #0b2f7a 0%, transparent 45%), radial-gradient(circle at 85% 80%, #2b0d3f 0%, transparent 40%), #061436; }
.tsec .section-title { font-weight: 800; }
.tflow__card blockquote { font-size: clamp(16px, 1.5vw, 20px); }

@media (max-width: 1200px) {
  .header.is-scrolled { top: 8px; left: 8px; right: 8px; }
}
@media (max-width: 640px) {
  .page-hero { min-height: 380px; }
  .fcall { right: 16px; bottom: 16px; }
  .fcall__btn, .fcall__ring { width: 54px; height: 54px; }
  .to-top { right: 22px; bottom: 84px; }
  .section-title { letter-spacing: -.4px; }
}
@media (prefers-reduced-motion: reduce) {
  .js .split-ready .w > span { transform: none !important; }
  .reveal { filter: none !important; }
  .reveal--clip > * { clip-path: none !important; }
}