/* ==========================================================================
   Nexorya — Home Page (FinKash-pattern recreation)
   Self-contained stylesheet. No framework dependency.
   Brand: navy #04407E / cyan #3DDAE1 · Sora (headings) + Inter (body)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root{
  --navy:#04407E;
  --navy-2:#062F5C;
  --navy-3:#0A5199;
  --cyan:#3DDAE1;
  --cyan-ink:#12909A;
  --ink:#16202B;
  --muted:#5B6A7A;
  --line:#E2E7EC;
  --bg-alt:#F5F8FA;
  --white:#fff;

  --shadow-sm:0 2px 8px rgba(4,64,126,.06);
  --shadow:0 10px 30px -12px rgba(4,64,126,.18);
  --shadow-lg:0 24px 56px -20px rgba(4,64,126,.28);

  --r-pill:999px;
  --r-card:12px;
  --r-img:14px;

  --ease:cubic-bezier(.16,.8,.3,1);
}

/* --------------------------------------------------------------------------
   2. RESET / BASE
   -------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  font-family:"Inter",system-ui,-apple-system,sans-serif;
  font-size:16px;
  line-height:1.7;
  color:var(--ink);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;border:0;background:none;cursor:pointer}
ul{list-style:none;margin:0;padding:0}
h1,h2,h3,h4{font-family:"Sora",system-ui,sans-serif;margin:0;line-height:1.2}
p{margin:0}
:focus-visible{outline:2px solid var(--cyan-ink);outline-offset:3px}

/* Wide container — matches the reference site's content width
   (≈1520px of content on a 1900px viewport) */
.wrap{
  width:100%;
  max-width:1600px;
  margin:0 auto;
  padding:0 40px;
}
@media (max-width:1200px){.wrap{padding:0 32px}}
@media (max-width:767px){.wrap{padding:0 20px}}

.section{padding:100px 0}
@media (max-width:1200px){.section{padding:80px 0}}
@media (max-width:767px){.section{padding:56px 0}}

/* --------------------------------------------------------------------------
   3. SCROLL REVEAL ANIMATIONS
   Declared BEFORE components so component :hover transforms (equal
   specificity) win over .r.in and hover lifts still work on revealed items.
   -------------------------------------------------------------------------- */
.r{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.r-left{transform:translateX(-32px)}
.r-right{transform:translateX(32px)}
.r-scale{transform:scale(.96)}
.r.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .r{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}

/* --------------------------------------------------------------------------
   4. SHARED TYPE + BUTTONS
   -------------------------------------------------------------------------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family:"Sora",sans-serif;font-weight:700;
  font-size:13px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink);margin-bottom:16px;
}
.eyebrow svg{color:var(--cyan-ink);flex:none}
.eyebrow.light{color:var(--white)}
.eyebrow.light svg{color:var(--cyan)}

.h2{
  font-weight:800;
  font-size:clamp(30px,3vw,44px);
  letter-spacing:-.02em;line-height:1.18;
  color:var(--navy);
}
.h2.light{color:var(--white)}

.lede{color:var(--muted);font-size:16px;line-height:1.8;text-align:justify}
.lede.light{color:#BED0E2}

/* Pill button (primary) */
.btn-pill{
  display:inline-flex;align-items:center;gap:12px;
  font-family:"Sora",sans-serif;font-weight:700;font-size:15px;
  background:var(--cyan);color:var(--navy);
  padding:14px 16px 14px 28px;border-radius:var(--r-pill);
  transition:background .25s ease,transform .25s var(--ease),box-shadow .25s ease;
  white-space:nowrap;
}
.btn-pill:hover{background:#5FE6EC;transform:translateY(-2px);box-shadow:0 10px 24px -8px rgba(61,218,225,.6)}
.btn-pill .ico{
  width:30px;height:30px;border-radius:50%;flex:none;
  background:var(--navy);color:var(--cyan);
  display:flex;align-items:center;justify-content:center;
  transition:transform .25s var(--ease);
}
.btn-pill:hover .ico{transform:rotate(45deg)}

/* Text link with underline */
.btn-text{
  display:inline-flex;align-items:center;gap:8px;
  font-family:"Sora",sans-serif;font-weight:700;font-size:14px;
  color:var(--navy);border-bottom:1.5px solid var(--navy);padding-bottom:2px;
  transition:color .2s ease,border-color .2s ease;
}
.btn-text:hover{color:var(--cyan-ink);border-color:var(--cyan-ink)}

/* Checklist */
.checks{display:grid;grid-template-columns:1fr 1fr;gap:16px 32px}
.checks li{display:flex;align-items:flex-start;gap:10px;font-size:15px;color:var(--ink);line-height:1.5}
.checks svg{flex:none;color:var(--cyan-ink);margin-top:3px}
@media (max-width:600px){.checks{grid-template-columns:1fr;gap:12px}}

/* --------------------------------------------------------------------------
   5. TOP BAR
   -------------------------------------------------------------------------- */
.topbar{background:var(--navy);color:#C7D8E8;font-size:13.5px;padding:10px 0}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px}
.topbar a{color:#fff;transition:color .2s ease}
.topbar a:hover{color:var(--cyan)}
.topbar-group{display:flex;align-items:center;gap:24px}
.topbar-item{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.topbar-item svg{color:var(--cyan);flex:none}
.topbar-mid a{color:var(--cyan);text-decoration:underline;text-underline-offset:2px}
@media (max-width:1100px){.topbar-mid{display:none}}
@media (max-width:767px){
  .topbar{font-size:12.5px}
  .topbar .wrap{justify-content:center}
  .topbar-right{display:none}
  .topbar-group{gap:16px}
}

/* --------------------------------------------------------------------------
   6. HEADER / NAV
   -------------------------------------------------------------------------- */
.header{background:var(--white);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:100}
.header .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;height:104px}
.logo img{height:82px;width:auto}

.nav{display:flex;align-items:center;gap:4px}
.nav > li > a{
  display:inline-flex;align-items:center;gap:5px;
  font-family:"Sora",sans-serif;font-weight:600;font-size:15px;
  color:var(--ink);padding:10px 16px;border-radius:6px;
  transition:color .2s ease;
}
.nav > li > a:hover,.nav > li > a.active{color:var(--navy)}
.nav > li > a.active{font-weight:700}
.nav .caret{transition:transform .25s ease}

.has-drop{position:relative}
.drop{
  position:absolute;top:calc(100% + 8px);left:0;min-width:250px;
  background:#fff;border:1px solid var(--line);border-radius:10px;
  box-shadow:var(--shadow-lg);padding:8px;
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .22s ease,transform .22s ease,visibility .22s;
  z-index:20;
}
.has-drop:hover .drop,.has-drop:focus-within .drop{opacity:1;visibility:visible;transform:translateY(0)}
.has-drop:hover .caret{transform:rotate(180deg)}
.drop a{display:block;padding:10px 14px;font-size:14.5px;color:var(--ink);border-radius:6px;transition:background .18s ease,color .18s ease}
.drop a:hover{background:var(--bg-alt);color:var(--navy)}

.nav-toggle{display:none;width:44px;height:44px;align-items:center;justify-content:center;color:var(--navy)}

@media (max-width:1100px){
  .header .wrap{height:86px}
  .logo img{height:62px}
  .nav-toggle{display:flex}
  .nav{
    position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:#fff;border-bottom:1px solid var(--line);
    box-shadow:var(--shadow);
    padding:8px 20px 20px;
    display:none;
  }
  .nav.open{display:flex}
  .nav > li > a{padding:14px 4px;border-bottom:1px solid var(--line);border-radius:0;justify-content:space-between}
  .drop{
    position:static;opacity:1;visibility:visible;transform:none;
    box-shadow:none;border:0;border-radius:0;background:var(--bg-alt);
    padding:4px 0 8px;margin-bottom:8px;min-width:0;
    display:none;
  }
  .drop.open{display:block}
  .header-cta{display:none}
  .nav-cta-mobile{display:flex;justify-content:center;margin-top:16px}
}
@media (min-width:1101px){.nav-cta-mobile{display:none}}

/* --------------------------------------------------------------------------
   7. HERO CAROUSEL
   -------------------------------------------------------------------------- */
.hero{position:relative;overflow:hidden;background:var(--navy)}
.slide{
  position:absolute;inset:0;
  opacity:0;visibility:hidden;
  transition:opacity .9s ease,visibility .9s;
}
.slide.active{position:relative;opacity:1;visibility:visible}
.slide-media{position:absolute;inset:0;z-index:0}
.slide-media img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.slide-media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(96deg,rgba(4,64,126,.96) 0%,rgba(4,64,126,.9) 34%,rgba(4,64,126,.6) 62%,rgba(4,64,126,.3) 100%);
}
.slide-inner{
  position:relative;z-index:1;
  min-height:660px;
  display:flex;flex-direction:column;justify-content:center;
  padding:96px 0 120px;
  max-width:720px;
}
/* Slides 2+ use <h2 class="slide-title"> so the page has exactly one <h1>,
   but they must render identically to the first slide's heading. */
.slide h1,
.slide .slide-title{
  font-family:"Sora",system-ui,sans-serif;
  font-weight:800;color:#fff;
  font-size:clamp(34px,4.2vw,60px);
  line-height:1.1;letter-spacing:-.025em;
  margin:0 0 22px;
}
.slide h1 .hl,
.slide .slide-title .hl{color:var(--cyan)}
.slide .lede{color:#D3E1EE;max-width:520px;margin-bottom:34px}
.hero-actions{display:flex;align-items:center;gap:22px;flex-wrap:wrap}

/* Animate slide content in */
.slide.active .slide-inner > *{animation:slideUp .8s var(--ease) backwards}
.slide.active .slide-inner > *:nth-child(1){animation-delay:.1s}
.slide.active .slide-inner > *:nth-child(2){animation-delay:.22s}
.slide.active .slide-inner > *:nth-child(3){animation-delay:.34s}
.slide.active .slide-inner > *:nth-child(4){animation-delay:.46s}
@keyframes slideUp{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .slide.active .slide-inner > *{animation:none}
}

.play-link{display:inline-flex;align-items:center;gap:12px;color:#fff;font-family:"Sora",sans-serif;font-weight:700;font-size:14.5px}
.play-circle{
  width:46px;height:46px;border-radius:50%;flex:none;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.42);
  display:flex;align-items:center;justify-content:center;
  transition:background .25s ease,color .25s ease;
}
.play-link:hover .play-circle{background:#fff;color:var(--navy)}
.play-link u{text-underline-offset:4px}

.scroll-tag{
  position:absolute;right:32px;top:50%;transform:translateY(-50%);
  z-index:3;display:flex;flex-direction:column;align-items:center;gap:12px;
  color:#BED0E2;
}
.scroll-tag span{writing-mode:vertical-rl;font-family:"Sora",sans-serif;font-size:12px;letter-spacing:.18em;text-transform:uppercase}
.scroll-tag svg{animation:bob 1.9s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}
@media (max-width:991px){.scroll-tag{display:none}}

.hero-nav{
  position:absolute;left:0;right:0;bottom:44px;z-index:3;
}
.hero-nav .wrap{display:flex;align-items:center;gap:20px}
.arrow{
  width:44px;height:44px;border-radius:50%;flex:none;
  border:1px solid rgba(255,255,255,.4);color:#fff;
  display:flex;align-items:center;justify-content:center;
  transition:background .2s ease,border-color .2s ease;
}
.arrow:hover{background:rgba(255,255,255,.15);border-color:#fff}
.progress{display:flex;align-items:center;gap:14px;max-width:320px;flex:1;color:#D3E1EE;font-size:13px;font-variant-numeric:tabular-nums}
.progress-track{flex:1;height:2px;background:rgba(255,255,255,.28);border-radius:2px;overflow:hidden}
.progress-fill{display:block;height:100%;background:var(--cyan);width:33.333%;transition:width .6s var(--ease)}

@media (max-width:991px){
  .slide-inner{min-height:520px;padding:64px 0 96px}
  .hero-nav{bottom:28px}
}
@media (max-width:600px){
  .slide-inner{min-height:460px;padding:48px 0 88px}
  .hero-actions{gap:14px}
  .progress{max-width:none}
}

/* --------------------------------------------------------------------------
   8. INTRO SPLIT (copy + image) & STATS
   -------------------------------------------------------------------------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
@media (max-width:991px){.split{grid-template-columns:1fr;gap:40px}}
.split-copy .h2{margin-bottom:20px}
.split-copy .lede{margin-bottom:28px;max-width:540px}
.split-img{border-radius:var(--r-img);overflow:hidden;box-shadow:var(--shadow)}
.split-img img{width:100%;aspect-ratio:3/2;object-fit:cover}

.stats{display:grid;grid-template-columns:0.9fr repeat(4,1fr);gap:20px;margin-top:72px}
@media (max-width:1100px){.stats{grid-template-columns:repeat(2,1fr)}.stats-photo{grid-column:span 2}}
@media (max-width:600px){.stats{grid-template-columns:1fr;gap:14px}.stats-photo{grid-column:span 1}}
.stats-photo{border-radius:var(--r-img);overflow:hidden}

/* 4-up stats grid without a photo column — same .stat cards, no leading image.
   Written as .stats.stats-4col (compound selector) rather than relying on
   source order against .stats alone, so this reliably wins regardless of
   how the stylesheet gets bundled/reordered. */
.stats.stats-4col{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;width:100%}
@media (max-width:1100px){.stats.stats-4col{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.stats.stats-4col{grid-template-columns:1fr;gap:14px}}
.stats-photo img{width:100%;height:100%;min-height:210px;object-fit:cover}
.stat{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-card);
  padding:32px 24px;text-align:center;
  display:flex;flex-direction:column;justify-content:center;
  transition:border-color .25s ease,box-shadow .25s ease,transform .25s var(--ease);
}
.stat:hover{border-color:transparent;box-shadow:var(--shadow);transform:translateY(-5px)}
.stat .n{
  font-family:"Sora",sans-serif;font-weight:800;
  font-size:clamp(30px,2.6vw,40px);color:var(--navy);
  line-height:1;letter-spacing:-.02em;margin-bottom:12px;
  font-variant-numeric:tabular-nums;
}
.stat .t{font-family:"Sora",sans-serif;font-weight:700;font-size:16px;color:var(--ink);margin-bottom:8px}
.stat p{font-size:13.5px;color:var(--muted);line-height:1.6}

/* --------------------------------------------------------------------------
   9. DARK 3-COLUMN STRIP
   -------------------------------------------------------------------------- */
.strip{background:linear-gradient(115deg,var(--navy) 0%,var(--navy-2) 100%);padding:56px 0}
.strip-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
@media (max-width:900px){.strip-grid{grid-template-columns:1fr;gap:34px}}
.strip-item{display:flex;align-items:flex-start;gap:20px;padding:8px 40px;position:relative}
.strip-item:first-child{padding-left:0}
.strip-item:last-child{padding-right:0}
.strip-item:not(:last-child)::after{
  content:"";position:absolute;right:0;top:4px;bottom:4px;width:1px;background:rgba(255,255,255,.18);
}
@media (max-width:900px){
  .strip-item{padding:0}
  .strip-item:not(:last-child)::after{display:none}
}
.strip-ic{
  width:56px;height:56px;border-radius:10px;flex:none;
  background:var(--cyan);color:var(--navy);
  display:flex;align-items:center;justify-content:center;
  transition:transform .3s var(--ease);
}
.strip-item:hover .strip-ic{transform:translateY(-4px) rotate(-6deg)}
.strip-item h3{font-weight:700;font-size:19px;color:#fff;margin-bottom:8px}
.strip-item p{font-size:14.5px;color:#BED0E2;line-height:1.6}

/* --------------------------------------------------------------------------
   10. SERVICES
   -------------------------------------------------------------------------- */
.sec-head{
  display:grid;grid-template-columns:1fr 1fr auto;
  gap:40px;align-items:end;margin-bottom:52px;
}
.sec-head-2col{grid-template-columns:1fr 1fr}
.section-flush-top{padding-top:0}
@media (max-width:1100px){.sec-head,.sec-head-2col{grid-template-columns:1fr;gap:24px;align-items:start}}
.sec-head .lede{max-width:420px}

.svc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
@media (max-width:1100px){.svc-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.svc-grid{grid-template-columns:1fr}}
/* 6-card variant (homepage): 3 columns × 2 rows instead of an uneven 4+2 split */
.svc-grid.svc-grid-6{grid-template-columns:repeat(3,1fr)}
@media (max-width:900px){.svc-grid.svc-grid-6{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.svc-grid.svc-grid-6{grid-template-columns:1fr}}
.svc{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-card);
  padding:36px 30px;
  display:flex;flex-direction:column;
  transition:transform .3s var(--ease),box-shadow .3s ease,border-color .3s ease;
}
.svc:hover{transform:translateY(-8px);box-shadow:var(--shadow-lg);border-color:transparent}
.svc-ic{width:52px;height:52px;color:var(--navy);margin-bottom:26px;transition:color .3s ease,transform .3s var(--ease)}
.svc:hover .svc-ic{color:var(--cyan-ink);transform:scale(1.06)}
.svc h3{font-weight:700;font-size:20px;color:var(--navy);line-height:1.3;padding-bottom:20px;border-bottom:1px solid var(--line);margin-bottom:20px}
.svc p{font-size:14.5px;color:var(--muted);line-height:1.7;margin-bottom:22px;flex:1}

/* --------------------------------------------------------------------------
   11. INDUSTRIES — infinite right-to-left marquee
   Two identical sets sit side by side; the track slides exactly one set
   width (-50%) then loops, so the motion is seamless.
   -------------------------------------------------------------------------- */
.marquee{
  position:relative;overflow:hidden;
  /* soft fade at both edges so items enter/leave rather than pop */
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
}
.marquee-track{display:flex;width:max-content;animation:marquee 32s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-set{display:flex;align-items:center;gap:56px;padding-right:56px;flex:none;margin:0;padding-left:0}
/* Three identical sets; shifting by exactly one third moves precisely one
   set width, so the loop is seamless and never leaves a gap on wide screens. */
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-33.3333%)}}

.industry{
  display:inline-flex;align-items:center;gap:10px;white-space:nowrap;
  font-family:"Sora",sans-serif;font-weight:700;font-size:17px;
  color:var(--muted);opacity:.8;
  transition:opacity .25s ease,color .25s ease;
}
.industry:hover{opacity:1;color:var(--navy)}
.industry svg{color:var(--cyan-ink);flex:none}

@media (max-width:600px){
  .marquee-set{gap:34px;padding-right:34px}
  .industry{font-size:15px}
  .marquee-track{animation-duration:24s}
}
@media (prefers-reduced-motion:reduce){
  .marquee-track{animation:none;flex-wrap:wrap}
  .marquee-set[aria-hidden="true"]{display:none}
  .marquee-set{flex-wrap:wrap;gap:20px 34px}
  .marquee{-webkit-mask-image:none;mask-image:none}
}

/* --------------------------------------------------------------------------
   12. DARK CAPABILITY GRID
   -------------------------------------------------------------------------- */
.cap{background:linear-gradient(150deg,var(--navy) 0%,var(--navy-2) 100%)}
.cap-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:56px 40px}
@media (max-width:1100px){.cap-grid{grid-template-columns:repeat(2,1fr);gap:40px 32px}}
@media (max-width:600px){.cap-grid{grid-template-columns:1fr;gap:34px}}
.cap-intro{grid-column:span 2}
@media (max-width:600px){.cap-intro{grid-column:span 1}}
.cap-intro .h2{margin-bottom:22px}
.cap-item .cap-ic{width:46px;height:46px;color:var(--cyan);margin-bottom:22px;transition:transform .3s var(--ease)}
.cap-item:hover .cap-ic{transform:translateY(-4px)}
.cap-item h3{font-weight:700;font-size:18px;color:#fff;line-height:1.35;margin-bottom:12px}
.cap-item p{font-size:14.5px;color:#BED0E2;line-height:1.65}

/* --------------------------------------------------------------------------
   13. TABBED SECTION
   -------------------------------------------------------------------------- */
.tabs-grid{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center}
@media (max-width:991px){.tabs-grid{grid-template-columns:1fr;gap:40px}}
.tabs-img{border-radius:var(--r-img);overflow:hidden;box-shadow:var(--shadow)}
.tabs-img img{width:100%;aspect-ratio:4/3;object-fit:cover}
.tabs-copy .h2{margin-bottom:26px}
.tab-btns{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:28px}
.tab-btn{
  font-family:"Sora",sans-serif;font-weight:700;font-size:14.5px;
  padding:12px 26px;border-radius:var(--r-pill);
  border:1.5px solid var(--line);background:#fff;color:var(--ink);
  transition:background .25s ease,color .25s ease,border-color .25s ease;
}
.tab-btn:hover{border-color:var(--navy)}
.tab-btn.active{background:var(--navy);color:#fff;border-color:var(--navy)}
.tab-panel{display:none}
.tab-panel.active{display:block;animation:fadeUp .45s var(--ease)}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.tab-panel .lede{margin-bottom:26px;max-width:560px}
.tab-panel .checks{margin-bottom:32px}
@media (prefers-reduced-motion:reduce){.tab-panel.active{animation:none}}

/* --------------------------------------------------------------------------
   14. FOOTER
   -------------------------------------------------------------------------- */
.footer{background:linear-gradient(155deg,var(--navy) 0%,var(--navy-2) 100%);color:#fff;padding:88px 0 32px}
.footer-grid{display:grid;grid-template-columns:1.5fr 1.1fr 1fr 1fr 1fr;gap:40px}
@media (max-width:1100px){.footer-grid{grid-template-columns:1fr 1fr 1fr;gap:40px 32px}}
@media (max-width:700px){.footer-grid{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.footer-grid{grid-template-columns:1fr}}
.footer-logo{height:38px;width:auto;margin-bottom:22px}
.footer-about p{font-size:14.5px;color:#BED0E2;line-height:1.75;max-width:300px}
.footer h4{font-weight:700;font-size:18px;color:#fff;margin-bottom:24px}
.footer li{margin-bottom:14px;font-size:14.5px}
.footer li a,.footer .addr{display:flex;align-items:flex-start;gap:10px;color:#BED0E2;transition:color .2s ease}
.footer li a:hover{color:var(--cyan)}
.footer .addr svg,.footer li a svg{flex:none;margin-top:4px;color:var(--cyan)}
.socials{display:flex;gap:10px;margin-top:26px}
.socials a{
  width:38px;height:38px;border-radius:50%;flex:none;
  background:var(--cyan);color:var(--navy);
  display:flex;align-items:center;justify-content:center;
  transition:background .25s ease,transform .25s var(--ease);
}
.socials a:hover{background:#fff;transform:translateY(-3px)}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.15);
  margin-top:64px;padding-top:28px;
  text-align:center;color:#9FB7CE;font-size:14px;
}

/* --------------------------------------------------------------------------
   15. FLOATING ACTION BUTTONS (WhatsApp + back to top)
   WhatsApp sits at the standard bottom-right corner; back-to-top stacks
   directly above it.
   -------------------------------------------------------------------------- */
.wa-float{
  position:fixed;right:24px;bottom:24px;z-index:95;
  width:58px;height:58px;border-radius:50%;
  background:#25D366;color:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 24px -6px rgba(37,211,102,.65);
  transition:transform .25s var(--ease),background .25s ease;
}
.wa-float:hover{background:#1EBE5B;transform:scale(1.07)}
.wa-float svg{position:relative;z-index:1}
.wa-pulse{
  position:absolute;inset:0;border-radius:50%;
  background:#25D366;opacity:.55;
  animation:waPulse 2.4s ease-out infinite;
}
@keyframes waPulse{
  0%{transform:scale(1);opacity:.5}
  70%{transform:scale(1.7);opacity:0}
  100%{transform:scale(1.7);opacity:0}
}

.to-top{
  position:fixed;right:30px;bottom:96px;z-index:90;
  width:46px;height:46px;border-radius:50%;
  background:var(--navy);color:var(--cyan);
  display:flex;align-items:center;justify-content:center;
  box-shadow:var(--shadow-lg);
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .3s ease,visibility .3s,transform .3s var(--ease),background .25s ease;
}
.to-top.show{opacity:1;visibility:visible;transform:none}
.to-top:hover{background:var(--navy-3)}

@media (max-width:600px){
  .wa-float{right:16px;bottom:16px;width:52px;height:52px}
  .wa-float svg{width:26px;height:26px}
  .to-top{right:21px;bottom:80px;width:42px;height:42px}
}
@media (prefers-reduced-motion:reduce){
  .wa-pulse{animation:none;opacity:0}
}

/* ==========================================================================
   HOME — TRUST BAR (new, sits directly under the hero)
   ========================================================================== */
.trustbar{background:var(--bg-alt);border-bottom:1px solid var(--line);padding:22px 0}
.trustbar-row{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:14px 40px}
.trustbar-item{
  display:inline-flex;align-items:center;gap:10px;
  font-family:"Sora",sans-serif;font-weight:700;font-size:13.5px;
  color:var(--navy);white-space:nowrap;
}
.trustbar-item svg{color:var(--cyan-ink);flex:none}
@media (max-width:640px){
  .trustbar-row{gap:12px 24px}
  .trustbar-item{font-size:12.5px}
}

/* ==========================================================================
   HOME — DEADLINE / URGENCY BAND (new)
   ========================================================================== */
.deadline-band{
  background:linear-gradient(100deg,var(--navy) 0%,var(--navy-2) 100%);
  padding:26px 0;
}
.deadline-row{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:20px 32px;text-align:center;
}
.deadline-copy{display:flex;align-items:center;gap:12px;color:#fff;font-family:"Sora",sans-serif;font-weight:700;font-size:15px}
.deadline-copy svg{color:var(--cyan);flex:none}
.countdown{display:flex;align-items:center;gap:10px}
.countdown-cell{display:flex;flex-direction:column;align-items:center;gap:2px}
.countdown-num{
  font-family:"Sora",sans-serif;font-weight:800;font-size:22px;color:#fff;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);
  border-radius:8px;min-width:52px;padding:8px 6px;
  font-variant-numeric:tabular-nums;
}
.countdown-label{font-family:"Sora",sans-serif;font-weight:700;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:#BED0E2}
.countdown-sep{color:rgba(255,255,255,.35);font-weight:800;font-size:20px;margin-top:-14px}
@media (max-width:600px){
  .countdown-num{min-width:42px;font-size:18px;padding:7px 4px}
  .deadline-copy{font-size:13.5px}
}