/* =====================================================================
   FTL — visual refresh layer
   Loaded after each page's own <style>, so it overrides by order.
   - Shared: colour tokens, header + mega menus, buttons, contact form
   - .home : homepage-only hero, pillar boxes, section cards
   ===================================================================== */

@property --ang{ syntax:'<angle>'; inherits:false; initial-value:0deg; }

:root{
  --c-blue:#2A72F0;
  --c-cyan:#13B5EA;
  --c-violet:#7B4DE0;
  --c-teal:#12B886;
  --c-amber:#F59F0B;
  --c-pink:#E64980;
  --c-indigo:#4C6EF5;
  --grad:linear-gradient(120deg,#2A72F0 0%,#13B5EA 50%,#7B4DE0 100%);
  --grad-soft:linear-gradient(120deg,rgba(42,114,240,.10),rgba(19,181,234,.08) 50%,rgba(123,77,224,.10));
  --r-xl:22px;
}

@keyframes fxGradShift{ to{ background-position:200% 50%; } }
@keyframes fxSpin{ to{ --ang:360deg; } }
@keyframes fxBob{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-6px) } }
@keyframes fxFloat{ 0%,100%{ transform:translate3d(0,0,0) } 50%{ transform:translate3d(0,-10px,0) } }
@keyframes fxPulse{ 0%{ box-shadow:0 0 0 0 rgba(18,184,134,.55) } 70%{ box-shadow:0 0 0 10px rgba(18,184,134,0) } 100%{ box-shadow:0 0 0 0 rgba(18,184,134,0) } }
@keyframes fxTileIn{ from{ opacity:0; transform:translateY(10px) scale(.97) } to{ opacity:1; transform:none } }
@keyframes fxShine{ from{ transform:translateX(-120%) skewX(-18deg) } to{ transform:translateX(220%) skewX(-18deg) } }
@keyframes fxSpinner{ to{ transform:rotate(360deg) } }
@keyframes fxDraw{ to{ stroke-dashoffset:0 } }
@keyframes fxPop{ 0%{ transform:scale(.6); opacity:0 } 60%{ transform:scale(1.08); opacity:1 } 100%{ transform:scale(1) } }
@keyframes fxShake{ 10%,90%{ transform:translateX(-1px) } 20%,80%{ transform:translateX(2px) } 30%,50%,70%{ transform:translateX(-4px) } 40%,60%{ transform:translateX(4px) } }

/* ---------- buttons ---------- */
.btn-primary{
  background:linear-gradient(120deg,#1B5FD9 0%,#2A72F0 45%,#13B5EA 100%);
  background-size:180% 100%; background-position:0% 50%;
  position:relative; overflow:hidden; isolation:isolate;
  box-shadow:0 10px 22px -14px rgba(27,95,217,.9);
  transition:background-position .5s var(--ease), transform .22s var(--ease), box-shadow .22s var(--ease);
}
.btn-primary::after{
  content:""; position:absolute; top:0; bottom:0; left:0; width:40%; z-index:-1;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);
  transform:translateX(-120%) skewX(-18deg);
}
.btn-primary:hover{ background:linear-gradient(120deg,#1B5FD9 0%,#2A72F0 45%,#13B5EA 100%); background-size:180% 100%; background-position:100% 50%; }
.btn-primary:hover::after{ animation:fxShine .8s var(--ease); }
.btn-ghost:hover{ box-shadow:0 10px 22px -16px rgba(27,95,217,.8); }

/* =====================================================================
   HEADER + MENU
   ===================================================================== */
.utility{ background:linear-gradient(90deg,#06152B,#0B2140 55%,#1a1f52); }
.masthead{ background:rgba(255,255,255,.86); }
.masthead::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px;
  background:linear-gradient(90deg,#2A72F0,#13B5EA,#7B4DE0,#2A72F0); background-size:200% 100%;
  animation:fxGradShift 6s linear infinite; opacity:0; transition:opacity .35s var(--ease);
}
.masthead.is-stuck::after{ opacity:1; }
.masthead.is-stuck{ border-color:transparent; }

@media (min-width:1261px){
  .nav{
    position:relative; gap:.1rem; padding:.28rem;
    /* background:rgba(241,246,252,.85); border:1px solid #E1EAF5; border-radius:999px; */
  }
  .nav > li{ position:static; }
  .nav > li.has-mega{ position:relative; }
  .nav > li > a, .nav > li > button{
    position:relative; z-index:1; padding:.5rem .78rem; border-radius:999px; font-size:.86rem;
  }
  .nav > li > a::after, .nav > li > button::after{ display:none; }
  .nav > li.is-current > a, .nav > li.is-current > button{ color:var(--blue-600); }
  .nav > li.is-current > a::before, .nav > li.is-current > button::before{
    content:""; position:absolute; left:50%; bottom:.18rem; width:5px; height:5px; margin-left:-2.5px;
    border-radius:50%; background:var(--grad);
  }
  .nav > li.nav-pill{
    position:absolute; top:.28rem; left:0; height:calc(100% - .56rem); width:0;
    border-radius:999px; background:#fff; pointer-events:none; z-index:0; opacity:0;
    box-shadow:0 8px 18px -10px rgba(27,95,217,.55), inset 0 0 0 1px rgba(42,114,240,.18);
    transition:transform .38s var(--ease), width .38s var(--ease), opacity .25s var(--ease);
  }
  /* invisible bridge so the pointer can travel from the button into the panel */
  .nav > li.has-mega::after{ content:""; position:absolute; left:-10px; right:-10px; top:100%; height:18px; }
}
.nav-pill{ list-style:none; }
@media (max-width:1260px){ .nav-pill{ display:none; } }

/* --- mega panel shell --- */
.mega{
  top:calc(100% + 14px);
  border:none; border-radius:var(--r-xl);
  background:rgba(255,255,255,.98);
  box-shadow:0 40px 80px -30px rgba(6,21,43,.45), 0 0 0 1px rgba(27,95,217,.10);
  transform:translateY(12px) scale(.985); transform-origin:50% 0;
  transition:opacity .28s var(--ease), transform .32s var(--ease), visibility .28s;
}
.mega::before{
  content:""; position:absolute; left:0; right:0; top:0; height:3px; z-index:4;
  background:linear-gradient(90deg,#2A72F0,#13B5EA,#7B4DE0,#2A72F0); background-size:200% 100%;
  animation:fxGradShift 5s linear infinite;
}
.nav > li:hover .mega, .nav > li:focus-within .mega{ transform:translateY(0) scale(1); }

/* --- tiles --- */
.mm-grid{ padding:1.15rem; gap:.5rem; }
.mm-grid > li:nth-child(7n+1){ --t1:#2A72F0; --t2:#13B5EA; }
.mm-grid > li:nth-child(7n+2){ --t1:#7B4DE0; --t2:#B06CF5; }
.mm-grid > li:nth-child(7n+3){ --t1:#12B886; --t2:#38D9A9; }
.mm-grid > li:nth-child(7n+4){ --t1:#13B5EA; --t2:#4C6EF5; }
.mm-grid > li:nth-child(7n+5){ --t1:#F59F0B; --t2:#F76707; }
.mm-grid > li:nth-child(7n+6){ --t1:#E64980; --t2:#F783AC; }
.mm-grid > li:nth-child(7n+7){ --t1:#4C6EF5; --t2:#7B4DE0; }
.nav > li:hover .mm-grid > li, .nav > li:focus-within .mm-grid > li{ animation:fxTileIn .45s var(--ease) both; }
.mm-grid > li:nth-child(2){ animation-delay:.03s!important } .mm-grid > li:nth-child(3){ animation-delay:.06s!important }
.mm-grid > li:nth-child(4){ animation-delay:.09s!important } .mm-grid > li:nth-child(5){ animation-delay:.12s!important }
.mm-grid > li:nth-child(6){ animation-delay:.15s!important } .mm-grid > li:nth-child(7){ animation-delay:.18s!important }

.mm-tile{
  position:relative; border:1px solid transparent; padding:.9rem .7rem 1rem;
  transition:background .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.mm-tile:hover{
  background:linear-gradient(180deg,#fff, color-mix(in srgb,var(--t1) 6%, #fff));
  border-color:color-mix(in srgb,var(--t1) 22%, transparent);
  transform:translateY(-3px);
  box-shadow:0 16px 28px -20px color-mix(in srgb,var(--t1) 80%, transparent);
}
.mm-img{ max-width:68px; aspect-ratio:1; border-radius:18px; }
.mm-img--icon{
  background:linear-gradient(135deg, color-mix(in srgb,var(--t1) 14%, #fff), color-mix(in srgb,var(--t2) 16%, #fff));
  color:var(--t1);
  transition:background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
}
.mm-img--icon svg{ width:44%; transition:transform .35s var(--ease); }
.mm-tile:hover .mm-img--icon{
  background:linear-gradient(135deg,var(--t1),var(--t2)); color:#fff;
  box-shadow:0 12px 22px -10px var(--t1);
}
.mm-tile:hover .mm-img--icon svg{ transform:scale(1.08) rotate(-8deg); }
.mm-tile:hover .mm-img{ transform:translateY(-2px); }
.mm-tile:hover .mm-text strong{ color:var(--t1); }
.mm-text strong::after{
  content:"→"; display:inline-block; margin-left:.3rem; opacity:0; transform:translateX(-4px);
  transition:opacity .25s var(--ease), transform .25s var(--ease);
}
.mm-tile:hover .mm-text strong::after{ opacity:1; transform:none; }

/* --- promo card in the panel --- */
.mm-card{
  position:relative; overflow:hidden; isolation:isolate;
  background:
    linear-gradient(165deg,rgba(11,33,64,.94) 10%,rgba(27,95,217,.80) 70%,rgba(123,77,224,.75)),
    url('https://images.unsplash.com/photo-1558494949-ef010cbdcc31?auto=format&fit=crop&w=600&q=70') center/cover,
    #0B2140;
}
.mega--svc .mm-card{
  background:
    linear-gradient(165deg,rgba(11,33,64,.94) 10%,rgba(18,184,134,.70) 75%,rgba(19,181,234,.7)),
    url('https://images.unsplash.com/photo-1581091226825-a6a2a5aee158?auto=format&fit=crop&w=600&q=70') center/cover,
    #0B2140;
}
.mm-card::before{
  content:""; position:absolute; width:180px; height:180px; right:-60px; top:-60px; z-index:-1;
  border-radius:50%; background:radial-gradient(circle,rgba(19,181,234,.55),transparent 65%);
  animation:fxFloat 6s ease-in-out infinite;
}
.mm-card h4{ font-size:1.08rem; }
.mm-card p{ color:rgba(232,240,251,.85); }
.mm-card a{
  color:#fff; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.28);
  padding:.55rem .9rem; border-radius:999px; align-self:flex-start; backdrop-filter:blur(6px);
  transition:background .25s var(--ease);
}
.mm-card a:hover{ background:rgba(255,255,255,.24); }

.mega-foot{ background:var(--grad-soft); border-top:1px solid #E4ECF7; }

/* --- About FTL mini menu --- */
.mega--mini{ width:min(330px,92vw); }
.mega-grid--1 .mega-col{ padding:.7rem; }
.ab-link{
  display:flex!important; align-items:center!important; gap:.8rem!important;
  padding:.65rem .7rem!important; margin:0!important; border-radius:14px!important;
  transition:background .25s var(--ease), transform .25s var(--ease)!important;
}
.ab-link:hover{ background:var(--grad-soft)!important; transform:translateX(3px); }
.ab-ic{
  width:40px; height:40px; flex:none; border-radius:12px; display:grid; place-items:center;
  color:#fff; background:linear-gradient(135deg,var(--t1),var(--t2));
  box-shadow:0 10px 18px -12px var(--t1);
}
.ab-ic svg{ width:19px!important; height:19px!important; margin:0!important; color:#fff!important; }
.ab-link span small{ margin-top:.1rem; }
.ab-link::after{ content:"→"; margin-left:auto; color:var(--muted); opacity:0; transform:translateX(-4px); transition:all .25s var(--ease); }
.ab-link:hover::after{ opacity:1; transform:none; color:var(--blue-600); }

/* --- header CTA --- */
.header-cta .btn-primary{ border-radius:999px; }

/* --- mobile drawer --- */
@media (max-width:1260px){
  .nav{ background:linear-gradient(180deg,#fff 0%,#F5F8FD 100%); }
  .nav > li{ border-bottom:1px solid #E7EEF7; }
  .nav > li > a, .nav > li > button{ font-weight:600; }
  .nav > li.is-current > a{ color:var(--blue-600); }
  .nav > li.is-open > button{ color:var(--blue-600); }
  .mega{ background:#fff; box-shadow:0 0 0 1px #E4ECF7; transform:none!important; }
  .mega::before{ display:none; }
  .mm-grid,.mm-wrap--4 .mm-grid,.mm-wrap--3 .mm-grid,.mm-wrap--4:has(.mm-card) .mm-grid,.mm-wrap--3:has(.mm-card) .mm-grid{ grid-template-columns:1fr 1fr; gap:.3rem; }
  .mm-tile{ flex-direction:row; text-align:left; align-items:center; gap:.7rem; padding:.6rem; }
  .mm-img{ width:42px; max-width:42px; flex:none; border-radius:12px; }
  .mm-text strong::after{ display:none; }
  .nav > li.is-open .mm-grid > li{ animation:fxTileIn .4s var(--ease) both; }
}
@media (max-width:620px){
  .mm-grid,.mm-wrap--4 .mm-grid,.mm-wrap--3 .mm-grid,.mm-wrap--4:has(.mm-card) .mm-grid,.mm-wrap--3:has(.mm-card) .mm-grid{ grid-template-columns:1fr; }
}

/* =====================================================================
   CONTACT INFO + FORM (all pages that have it)
   ===================================================================== */
#contact{ position:relative; overflow:hidden; }
#contact::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(520px 340px at 0% 10%, rgba(19,181,234,.12), transparent 65%),
    radial-gradient(560px 380px at 100% 90%, rgba(123,77,224,.12), transparent 65%);
}
#contact .wrap{ position:relative; }

.cinfo{
  border:1px solid var(--line)!important; border-radius:16px; background:#fff;
  padding:.9rem 1rem; margin-bottom:.7rem;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.cinfo:hover{ transform:translateX(4px); border-color:#C9DAF3!important; box-shadow:0 14px 28px -22px rgba(27,95,217,.7); }
.cinfo .ic{ width:44px; height:44px; border-radius:13px; color:#fff; background:linear-gradient(135deg,#2A72F0,#13B5EA); }
.cinfo:nth-of-type(2) .ic, .cinfo + .cinfo .ic{ background:linear-gradient(135deg,#7B4DE0,#B06CF5); }
.cinfo + .cinfo + .cinfo .ic{ background:linear-gradient(135deg,#12B886,#38D9A9); }
.cinfo:hover .ic{ background:linear-gradient(135deg,#1B5FD9,#7B4DE0); }
.map{ border-radius:18px; box-shadow:0 18px 40px -30px rgba(6,21,43,.6); }

.fx-form{
  position:relative; isolation:isolate; overflow:hidden;
  background:#fff!important; border:none!important; border-radius:26px!important;
  padding:0!important;
  box-shadow:0 40px 80px -40px rgba(6,21,43,.45), 0 0 0 1px rgba(27,95,217,.10);
}
.fx-head{
  position:relative; overflow:hidden; color:#fff; padding:1.6rem clamp(1.3rem,3vw,2rem) 1.5rem;
  background:linear-gradient(125deg,#0B2140 0%,#1B5FD9 55%,#7B4DE0 100%);
}
.fx-head::before, .fx-head::after{
  content:""; position:absolute; border-radius:50%; pointer-events:none;
}
.fx-head::before{ width:220px; height:220px; right:-70px; top:-90px; background:radial-gradient(circle,rgba(19,181,234,.6),transparent 65%); animation:fxFloat 7s ease-in-out infinite; }
.fx-head::after{ width:160px; height:160px; left:35%; bottom:-110px; background:radial-gradient(circle,rgba(230,73,128,.35),transparent 65%); animation:fxFloat 9s ease-in-out infinite reverse; }
.fx-head > *{ position:relative; z-index:1; }
.fx-badge{
  display:inline-flex; align-items:center; gap:.5rem; font-size:.76rem; font-weight:500;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.25); backdrop-filter:blur(6px);
  padding:.32rem .75rem; border-radius:999px; margin-bottom:.85rem;
}
.fx-badge i{ width:7px; height:7px; border-radius:50%; background:#38D9A9; animation:fxPulse 2s infinite; }
.fx-head h3{ color:#fff; font-size:clamp(1.25rem,2.2vw,1.5rem); }
.fx-head p{ color:rgba(232,240,251,.85); font-size:.9rem; margin-top:.35rem; }
.fx-steps{ display:flex; gap:.4rem; margin-top:1.1rem; }
.fx-steps span{ flex:1; height:4px; border-radius:4px; background:rgba(255,255,255,.22); overflow:hidden; position:relative; }
.fx-steps span::after{ content:""; position:absolute; inset:0; background:#fff; transform:scaleX(0); transform-origin:left; transition:transform .45s var(--ease); }
.fx-steps span.on::after{ transform:scaleX(1); }

.fx-form form{ padding:1.5rem clamp(1.3rem,3vw,2rem) 1.6rem; }
.fx-form .form-row{ gap:.85rem; }
.fx-form .field{ margin-bottom:.9rem; }

/* choice chips */
fieldset.fx-choice{ border:none; padding:0; margin:0 0 1.1rem; min-width:0; }
.fx-choice legend{ font-family:var(--head); font-weight:600; font-size:.9rem; color:var(--ink); margin-bottom:.65rem; padding:0; }
.fx-chips{ display:grid; grid-template-columns:repeat(3,1fr); gap:.5rem; }
@media (max-width:520px){ .fx-chips{ grid-template-columns:1fr 1fr; } }
.fx-chips label{ position:relative; cursor:pointer; margin:0!important; }
.fx-chips input{ position:absolute; opacity:0; inset:0; margin:0; cursor:pointer; }
.fx-chips label > span{
  display:flex; flex-direction:column; align-items:flex-start; gap:.45rem;
  height:100%; padding:.7rem .75rem; border-radius:14px;
  border:1.5px solid var(--line); background:#FAFCFF;
  font-size:.83rem; font-weight:600; color:var(--ink); line-height:1.25;
  transition:border-color .2s var(--ease), background .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease), color .2s var(--ease);
}
.fx-chips label > span i{
  width:30px; height:30px; border-radius:9px; display:grid; place-items:center;
  background:color-mix(in srgb,var(--t1) 13%, #fff); color:var(--t1);
  transition:background .2s var(--ease), color .2s var(--ease), transform .25s var(--ease);
}
.fx-chips label > span svg{ width:16px; height:16px; }
.fx-chips label:hover > span{ border-color:color-mix(in srgb,var(--t1) 45%, transparent); transform:translateY(-2px); }
.fx-chips input:focus-visible + span{ outline:2.5px solid var(--blue-500); outline-offset:2px; }
.fx-chips input:checked + span{
  border-color:var(--t1); background:color-mix(in srgb,var(--t1) 7%, #fff); color:var(--t1);
  box-shadow:0 12px 22px -16px var(--t1);
}
.fx-chips input:checked + span i{ background:linear-gradient(135deg,var(--t1),var(--t2)); color:#fff; transform:scale(1.06); }
.fx-chips label:nth-child(1){ --t1:#2A72F0; --t2:#13B5EA; }
.fx-chips label:nth-child(2){ --t1:#12B886; --t2:#38D9A9; }
.fx-chips label:nth-child(3){ --t1:#7B4DE0; --t2:#B06CF5; }
.fx-chips label:nth-child(4){ --t1:#F59F0B; --t2:#F76707; }
.fx-chips label:nth-child(5){ --t1:#E64980; --t2:#F783AC; }
.fx-chips label:nth-child(6){ --t1:#4C6EF5; --t2:#7B4DE0; }
.fx-choice.invalid .fx-chips{ animation:fxShake .45s; }
.fx-choice.invalid .fx-chips label > span{ border-color:#F3B4AE; }

/* floating-label inputs */
.fx-input{ position:relative; }
.fx-input input, .fx-input textarea{
  width:100%; font-family:var(--text); font-size:.95rem; color:var(--ink);
  background:#F6F9FD; border:1.5px solid transparent; border-radius:14px;
  padding:1.35rem .95rem .5rem 2.85rem;
  transition:border-color .2s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease);
}
.fx-input textarea{ min-height:130px; resize:vertical; padding-top:1.5rem; }
.fx-input label{
  position:absolute; left:2.85rem; top:.95rem; margin:0!important;
  font-size:.92rem!important; font-weight:400!important; color:var(--muted)!important;
  pointer-events:none; transform-origin:left top;
  transition:transform .2s var(--ease), color .2s var(--ease);
}
.fx-input label em{ font-style:normal; font-size:.78em; opacity:.75; }
.fx-input input::placeholder, .fx-input textarea::placeholder{ color:transparent; }
.fx-input input:focus, .fx-input textarea:focus{
  outline:none; background:#fff; border-color:var(--blue-500);
  box-shadow:0 0 0 4px rgba(42,114,240,.13);
}
.fx-input input:focus + label, .fx-input input:not(:placeholder-shown) + label,
.fx-input textarea:focus + label, .fx-input textarea:not(:placeholder-shown) + label{
  transform:translateY(-.55rem) scale(.78); color:var(--blue-600)!important; font-weight:500!important;
}
.fx-ic{
  position:absolute; left:.95rem; top:1.05rem; width:18px; height:18px; color:#94A6BC;
  pointer-events:none; transition:color .2s var(--ease), transform .2s var(--ease);
}
.fx-input:focus-within .fx-ic{ color:var(--blue-600); transform:scale(1.08); }
.fx-input.valid .fx-ic{ color:var(--c-teal); }
.fx-input.valid input, .fx-input.valid textarea{ border-color:rgba(18,184,134,.45); }
.fx-input.invalid input, .fx-input.invalid textarea{ border-color:var(--live); background:#FFF7F6; }
.fx-input.invalid .fx-ic{ color:var(--live); }
.fx-count{ position:absolute; right:.9rem; bottom:.6rem; font-size:.72rem; color:var(--muted); pointer-events:none; }
.fx-form .err{ font-size:.78rem; }

.fx-submit{
  width:100%; justify-content:center; padding:1rem 1.5rem!important; font-size:1rem!important; border-radius:14px!important;
  background:linear-gradient(120deg,#1B5FD9,#2A72F0 40%,#7B4DE0)!important; background-size:200% 100%!important;
}
.fx-submit:hover{ background-position:100% 50%!important; }
.fx-submit .fx-spin{ display:none; width:18px; height:18px; border-radius:50%; border:2.4px solid rgba(255,255,255,.4); border-top-color:#fff; animation:fxSpinner .7s linear infinite; }
.fx-submit.loading{ pointer-events:none; opacity:.92; }
.fx-submit.loading .fx-spin{ display:inline-block; }
.fx-submit.loading svg{ display:none; }
.fx-note{ display:flex; align-items:center; justify-content:center; gap:.45rem; flex-wrap:wrap; margin-top:.9rem; font-size:.8rem; color:var(--muted); text-align:center; }
.fx-note svg{ width:14px; height:14px; color:var(--c-teal); }
.fx-note a{ font-weight:600; }

.fx-form .form-done{ padding:3rem 1.5rem 3.2rem; }
.fx-form .form-done .fx-tick{
  width:84px; height:84px; margin:0 auto 1.1rem; border-radius:50%; display:grid; place-items:center;
  background:linear-gradient(135deg,#12B886,#13B5EA); box-shadow:0 18px 34px -16px rgba(18,184,134,.9);
  animation:fxPop .6s var(--ease) both;
}
.fx-form .form-done .fx-tick svg{ width:40px; height:40px; color:#fff; margin:0; }
.fx-form .form-done .fx-tick path{ stroke-dasharray:30; stroke-dashoffset:30; animation:fxDraw .5s .35s var(--ease) forwards; }
.fx-form .form-done h3{ font-size:1.35rem; }
.fx-form .form-done .btn{ margin-top:1.3rem; }

/* back to top */
.top{ background:var(--grad); }

/* =====================================================================
   HOMEPAGE
   ===================================================================== */

/* ---------- eyebrow labels ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:.55rem;
  font-family:var(--head); font-size:.76rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  padding:.38rem .85rem .38rem .45rem; border-radius:999px; margin-bottom:1rem;
  color:var(--blue-600); background:var(--grad-soft); border:1px solid rgba(42,114,240,.16);
}
.eyebrow b{ display:grid; place-items:center; min-width:22px; height:22px; padding:0 .3rem; border-radius:999px; background:var(--grad); color:#fff; font-size:.68rem; letter-spacing:0; }
.eyebrow--dark{ color:#CFE0FF; background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.16); }
.grad-text{
  background:linear-gradient(100deg,#5A97FF 0%,#13B5EA 40%,#B06CF5 80%,#5A97FF 100%); background-size:200% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:fxGradShift 6s linear infinite;
}
.home .head h2 .grad-text{ background-image:var(--grad); background-size:200% 100%; }

/* ---------- hero ---------- */
.home .hero{ background:#050F22; padding-top:clamp(2.6rem,5vw,4rem); padding-bottom:clamp(7rem,11vw,9rem); }
.home .hero::before{
  background:
    radial-gradient(800px 520px at 82% 12%, rgba(42,114,240,.38), transparent 62%),
    radial-gradient(620px 460px at 4% 96%, rgba(123,77,224,.35), transparent 60%),
    radial-gradient(520px 380px at 48% 60%, rgba(19,181,234,.14), transparent 65%);
}
.hero-aurora{ position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:1; }
.hero-aurora span{ position:absolute; border-radius:50%; filter:blur(70px); opacity:.55; animation:fxFloat 12s ease-in-out infinite; }
.hero-aurora span:nth-child(1){ width:420px; height:420px; left:-120px; top:-140px; background:#2A72F0; }
.hero-aurora span:nth-child(2){ width:360px; height:360px; right:8%; top:40%; background:#7B4DE0; animation-duration:15s; animation-direction:reverse; opacity:.42; }
.hero-aurora span:nth-child(3){ width:300px; height:300px; left:40%; bottom:-160px; background:#13B5EA; animation-duration:18s; opacity:.35; }
.home .hero-mesh{ z-index:1; opacity:.7; }
.hero-mesh .flow{ stroke-dasharray:6 14; animation:fxDash 3.5s linear infinite; }
@keyframes fxDash{ to{ stroke-dashoffset:-200; } }
.hero-mesh .pulse{ filter:drop-shadow(0 0 6px #13B5EA); }

.home .hero h1{ font-size:clamp(2.1rem,4.4vw,3.35rem); max-width:16ch; }
.home .hero-lead{ color:#B5C6DD; }
.home .hero .btn-onDark{ backdrop-filter:blur(6px); background:rgba(255,255,255,.06); }
.home .hero-meta{ border-top:none; padding-top:0; gap:.7rem; grid-template-columns:repeat(4,minmax(0,1fr)); justify-content:stretch; max-width:560px; }
.home .hero-meta > div{
  padding:.85rem .9rem; border-radius:16px;
  background:linear-gradient(160deg,rgba(255,255,255,.09),rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.12); backdrop-filter:blur(6px);
  transition:transform .3s var(--ease), border-color .3s var(--ease);
}
.home .hero-meta > div:hover{ transform:translateY(-3px); border-color:rgba(90,151,255,.55); }
.home .hero-meta div strong{ font-size:1.5rem; background:linear-gradient(120deg,#fff,#9CC2FF); -webkit-background-clip:text; background-clip:text; color:transparent; }
.home .hero-meta div span{ font-size:.78rem; line-height:1.35; display:block; }
@media (max-width:620px){ .home .hero-meta{ grid-template-columns:repeat(2,1fr); } }

/* image collage */
.hero-visual{ position:relative; min-height:clamp(340px,36vw,460px); }
.hv-main{
  position:absolute; inset:0 14% 10% 0; border-radius:26px; overflow:hidden;
  background-size:cover; background-position:center; background-color:#13314F;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 40px 80px -30px rgba(0,0,0,.7);
  display:flex; flex-direction:column; justify-content:flex-end; padding:1.4rem;
}
.hv-main::after{ content:""; position:absolute; inset:0; background:linear-gradient(200deg,rgba(6,21,43,.05) 30%,rgba(6,21,43,.88)); }
.hv-main > *{ position:relative; z-index:2; }
.hv-main .hero-chip{ position:absolute; top:1.1rem; left:1.1rem; }
.hv-main .hero-chip i{ background:#38D9A9; animation:fxPulse 2s infinite; }
.hv-main .hero-panel-caption{ max-width:min(36ch,62%); color:#C9D7EA; }
.hv-side{
  position:absolute; right:0; bottom:0; width:42%; aspect-ratio:4/3.3; border-radius:22px; overflow:hidden;
  background-size:cover; background-position:center; background-color:#1B4570;
  border:4px solid #0A1A35; box-shadow:0 30px 60px -24px rgba(0,0,0,.75);
  animation:fxFloat 8s ease-in-out infinite;
}
.hv-side::after{ content:""; position:absolute; inset:0; background:linear-gradient(160deg,rgba(123,77,224,.25),rgba(19,181,234,.15)); mix-blend-mode:screen; }
.hv-card{
  position:absolute; z-index:4; border-radius:16px; padding:.8rem .95rem;
  background:rgba(255,255,255,.92); color:var(--ink); backdrop-filter:blur(10px);
  box-shadow:0 22px 40px -18px rgba(0,0,0,.55);
  display:flex; align-items:center; gap:.7rem; font-size:.78rem;
}
.hv-card strong{ display:block; font-family:var(--head); font-size:.88rem; color:var(--ink); line-height:1.2; }
.hv-card small{ color:var(--muted); font-size:.74rem; }
.hv-card .ic{ width:36px; height:36px; border-radius:11px; display:grid; place-items:center; color:#fff; flex:none; }
.hv-card .ic svg{ width:18px; height:18px; }
.hv-card--a{ top:8%; right:2%; animation:fxFloat 6s ease-in-out infinite; }
.hv-card--a .ic{ background:linear-gradient(135deg,#12B886,#38D9A9); }
.hv-card--b{ left:-5%; top:36%; animation:fxFloat 7s 1s ease-in-out infinite; flex-direction:column; align-items:flex-start; gap:.45rem; }
.hv-bars{ display:flex; align-items:flex-end; gap:4px; height:34px; }
.hv-bars i{ width:7px; border-radius:3px; background:linear-gradient(180deg,#13B5EA,#2A72F0); animation:fxBar 1.6s ease-in-out infinite; transform-origin:bottom; }
.hv-bars i:nth-child(1){ height:40%; animation-delay:-.2s } .hv-bars i:nth-child(2){ height:70%; animation-delay:-.5s }
.hv-bars i:nth-child(3){ height:55%; animation-delay:-.9s } .hv-bars i:nth-child(4){ height:90%; animation-delay:-.3s }
.hv-bars i:nth-child(5){ height:65%; animation-delay:-1.1s } .hv-bars i:nth-child(6){ height:80%; animation-delay:-.7s }
.hv-bars i:nth-child(7){ height:50%; animation-delay:-1.3s } .hv-bars i:nth-child(8){ height:95%; animation-delay:-.1s }
.hv-bars i:nth-child(9){ height:60%; animation-delay:-.6s } .hv-bars i:nth-child(10){ height:75%; animation-delay:-1s }
@keyframes fxBar{ 0%,100%{ transform:scaleY(1) } 50%{ transform:scaleY(.55) } }
.hv-ring{
  position:absolute; z-index:0; width:180px; height:180px; right:-40px; top:-40px; border-radius:50%;
  border:1px dashed rgba(90,151,255,.45); animation:fxSpinner 30s linear infinite;
}
.hv-ring::after{ content:""; position:absolute; width:10px; height:10px; border-radius:50%; background:#13B5EA; top:14px; left:30px; box-shadow:0 0 14px #13B5EA; }
@media (max-width:920px){
  .hero-visual{ min-height:360px; margin-top:.5rem; }
}
@media (max-width:560px){
  .hero-visual{ min-height:300px; }
  .hv-main{ inset:0 0 18% 0; }
  .hv-side{ width:46%; }
  .hv-card--a{ top:24%; right:4%; }
  .hv-card--b{ display:none; }
  .hv-ring{ display:none; }
}

/* ---------- four pillar boxes ---------- */
.home .rail{ margin-top:clamp(-6rem,-8vw,-4.5rem); }
.home .rail-grid{ gap:var(--gap); background:none; border:none; border-radius:0; overflow:visible; box-shadow:none; perspective:1200px; }
.home .pillar{
  --mx:50%; --my:0%;
  background:#fff; border-radius:24px; padding:0 0 1.5rem; gap:.7rem; overflow:hidden; isolation:isolate;
  box-shadow:0 26px 50px -30px rgba(6,21,43,.55), 0 0 0 1px rgba(27,95,217,.08);
  transform-style:preserve-3d; will-change:transform;
  transition:transform .5s var(--ease), box-shadow .4s var(--ease);
}
.home .pillar > *:not(.pillar-media){ position:relative; z-index:2; margin-inline:1.45rem; }
.home .pillar:hover{ background:#fff; box-shadow:0 40px 70px -32px color-mix(in srgb,var(--acc) 70%, #06152B); }
/* spotlight */
.home .pillar::before{
  inset:0; width:auto; z-index:1; transform:none!important; opacity:0;
  background:radial-gradient(420px circle at var(--mx) var(--my), color-mix(in srgb,var(--acc) 16%, transparent), transparent 45%);
  transition:opacity .35s var(--ease);
}
.home .pillar:hover::before{ opacity:1; }
/* travelling gradient border */
.home :is(.pillar,.fam,.svc,.prod)::after{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:2px; pointer-events:none; z-index:5;
  background:conic-gradient(from var(--ang), var(--acc,#2A72F0), var(--acc2,#13B5EA), transparent 35%, transparent 65%, var(--acc,#2A72F0));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:0; transition:opacity .4s var(--ease);
  animation:fxSpin 4s linear infinite;
}
.home :is(.pillar,.fam,.svc,.prod):hover::after{ opacity:1; }

.pillar-media{
  position:relative; height:clamp(130px,11vw,155px); overflow:hidden; margin-bottom:-.2rem;
  background-size:cover; background-position:center; background-color:var(--acc);
  transition:transform .7s var(--ease);
}
.pillar-media::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(6,21,43,.05) 0%, color-mix(in srgb,var(--acc) 55%, rgba(6,21,43,.7)) 100%);
  transition:opacity .4s var(--ease);
}
.pillar-media::after{
  content:""; position:absolute; top:0; bottom:0; left:0; width:45%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);
  transform:translateX(-120%) skewX(-18deg);
}
.home .pillar:hover .pillar-media{ transform:scale(1.06); }
.home .pillar:hover .pillar-media::after{ animation:fxShine 1s var(--ease); }
.pillar-num{
  position:absolute; right:1rem; top:.7rem; z-index:2;
  font-family:var(--head); font-weight:700; font-size:2.1rem; line-height:1; color:rgba(255,255,255,.9);
  text-shadow:0 4px 18px rgba(0,0,0,.35); letter-spacing:-.03em;
}
.pillar-tag{
  position:absolute; left:1rem; top:.85rem; z-index:2;
  font-size:.7rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:#fff;
  background:rgba(6,21,43,.45); border:1px solid rgba(255,255,255,.25); backdrop-filter:blur(6px);
  padding:.25rem .6rem; border-radius:999px;
}
.home .pillar .rail-icon{
  width:58px; height:58px; border-radius:18px; margin-top:-32px;
  color:#fff; background:linear-gradient(135deg,var(--acc),var(--acc2));
  border:4px solid #fff; box-shadow:0 14px 26px -12px var(--acc);
  transform:translateZ(30px);
}
.home .pillar .rail-icon svg{ width:24px; height:24px; }
.home .pillar:hover .rail-icon{ background:linear-gradient(135deg,var(--acc),var(--acc2)); animation:fxBob 1.4s ease-in-out infinite; }
.home .pillar h3{ font-size:1.18rem; transform:translateZ(20px); }
.home .pillar:hover h3{ color:var(--acc); }
.home .pillar p{ transform:translateZ(10px); }
.home .pillar .rail-link{ color:var(--acc); }
.home .pillar .rail-link::before{
  content:""; position:absolute; left:0; bottom:-3px; height:2px; width:100%; background:linear-gradient(90deg,var(--acc),var(--acc2));
  transform:scaleX(0); transform-origin:left; transition:transform .35s var(--ease);
}
.home .pillar .rail-link{ position:relative; align-self:flex-start; }
.home .pillar:hover .rail-link::before{ transform:scaleX(1); }

/* ---------- section backgrounds ---------- */
.home .section--ice{
  background:
    radial-gradient(700px 380px at 0% 0%, rgba(19,181,234,.10), transparent 60%),
    radial-gradient(700px 420px at 100% 100%, rgba(123,77,224,.09), transparent 60%),
    var(--ice);
}
.home #solutions{ background:radial-gradient(800px 400px at 100% 0%, rgba(42,114,240,.07), transparent 60%), #fff; }
.home #software{ background:radial-gradient(700px 420px at 0% 50%, rgba(123,77,224,.07), transparent 60%), #fff; }

/* ---------- shared card accents (solutions / software / services / products) ---------- */
.home :is(.fam,.svc,.prod){ --mx:50%; --my:0%; position:relative; isolation:isolate; border-radius:20px; }
.home :is(.fam,.svc,.prod)::before{
  content:""; position:absolute; inset:0; border-radius:inherit; z-index:-1; pointer-events:none; opacity:0;
  background:radial-gradient(360px circle at var(--mx) var(--my), color-mix(in srgb,var(--acc,#2A72F0) 13%, transparent), transparent 50%);
  transition:opacity .35s var(--ease);
}
.home :is(.fam,.svc,.prod):hover::before{ opacity:1; }
.home :is(.fam,.svc,.prod):hover{ border-color:transparent; box-shadow:0 30px 56px -30px color-mix(in srgb,var(--acc,#2A72F0) 75%, #06152B); }

.home :is(.fam-grid,.svc-grid,.prod-grid) > :nth-child(7n+1){ --acc:#2A72F0; --acc2:#13B5EA; }
.home :is(.fam-grid,.svc-grid,.prod-grid) > :nth-child(7n+2){ --acc:#7B4DE0; --acc2:#B06CF5; }
.home :is(.fam-grid,.svc-grid,.prod-grid) > :nth-child(7n+3){ --acc:#12B886; --acc2:#38D9A9; }
.home :is(.fam-grid,.svc-grid,.prod-grid) > :nth-child(7n+4){ --acc:#13B5EA; --acc2:#4C6EF5; }
.home :is(.fam-grid,.svc-grid,.prod-grid) > :nth-child(7n+5){ --acc:#F59F0B; --acc2:#F76707; }
.home :is(.fam-grid,.svc-grid,.prod-grid) > :nth-child(7n+6){ --acc:#E64980; --acc2:#F783AC; }
.home :is(.fam-grid,.svc-grid,.prod-grid) > :nth-child(7n+7){ --acc:#4C6EF5; --acc2:#7B4DE0; }

/* solution / software cards with photo covers */
.home .fam{ overflow:hidden; padding-top:0; }
.fam-cover{
  position:relative; height:150px; margin:0 -1.35rem .35rem; overflow:hidden;
  background-size:cover; background-position:center; background-color:var(--acc);
}
.fam-cover::before{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg,rgba(6,21,43,0) 30%, color-mix(in srgb,var(--acc) 50%, rgba(6,21,43,.65)) 100%);
}
.fam-cover::after{
  content:""; position:absolute; top:0; bottom:0; left:0; width:45%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);
  transform:translateX(-120%) skewX(-18deg); z-index:2;
}
.fam-cover > span{ position:absolute; inset:0; z-index:0; background-size:cover; background-position:center; transition:transform .8s var(--ease); }
.home .fam:hover .fam-cover > span{ transform:scale(1.08); }
.home .fam:hover .fam-cover::after{ animation:fxShine 1s var(--ease); }
.home .fam .fam-icon{
  width:52px; height:52px; border-radius:16px; margin-top:-34px; position:relative; z-index:2;
  color:#fff; background:linear-gradient(135deg,var(--acc),var(--acc2));
  border:4px solid #fff; box-shadow:0 12px 22px -12px var(--acc);
  transition:transform .4s var(--ease);
}
.home .fam:hover .fam-icon{ background:linear-gradient(135deg,var(--acc),var(--acc2)); transform:translateY(-4px) rotate(-6deg); }
.home .fam:hover h3{ color:var(--acc); }
.home .fam-link{ color:var(--acc); }
.home .fam:hover .fam-tags span{ border-color:color-mix(in srgb,var(--acc) 30%, transparent); color:color-mix(in srgb,var(--acc) 80%, #0F1E2E); background:color-mix(in srgb,var(--acc) 7%, #fff); }
.home .fam-tags span{ transition:all .25s var(--ease); }
.home .fam:hover .fam-tags span:nth-child(2){ transition-delay:.04s } .home .fam:hover .fam-tags span:nth-child(3){ transition-delay:.08s }
.home .fam:hover .fam-tags span:nth-child(4){ transition-delay:.12s } .home .fam:hover .fam-tags span:nth-child(5){ transition-delay:.16s }

/* services */
.home .svc{ overflow:hidden; }
.home .svc-head svg{
  width:46px; height:46px; padding:12px; border-radius:14px; color:#fff;
  background:linear-gradient(135deg,var(--acc),var(--acc2)); box-shadow:0 12px 22px -12px var(--acc);
  transition:transform .4s var(--ease);
}
.home .svc:hover .svc-head svg{ transform:rotate(-8deg) scale(1.06); }
.home .svc:hover .svc-head h3{ color:var(--acc); }
.home .svc ul li svg{ color:var(--acc); }
.home .svc ul li{ transition:padding-left .25s var(--ease), color .25s var(--ease); }
.home .svc ul li:hover{ padding-left:.3rem; color:var(--ink); }
.home .svc-head{ padding-right:2.8rem; }
.home .svc .svc-num{
  position:absolute; right:1rem; top:.6rem; font-family:var(--head); font-weight:700; font-size:2.6rem; line-height:1;
  color:transparent; -webkit-text-stroke:1.2px color-mix(in srgb,var(--acc) 35%, transparent);
  transition:transform .4s var(--ease), -webkit-text-stroke-color .4s;
}
.home .svc:hover .svc-num{ transform:translateY(-3px) scale(1.06); -webkit-text-stroke-color:var(--acc); }

/* products */
.home .prod{ background:#fff; }
.home .prod-img{ position:relative; background:linear-gradient(160deg, color-mix(in srgb,var(--acc) 10%, #F3F6FA), color-mix(in srgb,var(--acc2) 16%, #EEF2F7)) !important; }
.home .prod-img::after{
  content:""; position:absolute; width:60%; aspect-ratio:1; border-radius:50%; left:20%; top:15%;
  background:radial-gradient(circle, color-mix(in srgb,var(--acc) 35%, transparent), transparent 65%);
  opacity:0; transition:opacity .4s var(--ease); z-index:0;
}
.home .prod-img svg{ position:relative; z-index:1; }
.home .prod--img:hover .prod-img::after{ opacity:1; }
.home .prod--img:hover .prod-img svg{ animation:fxBob 1.8s ease-in-out infinite; transform:none; }
.home a.prod:hover h3{ color:var(--acc); }

/* software chips */
.home .chips span{ transition:all .25s var(--ease); }
.home .chips span:hover{ color:#fff; border-color:transparent; background:var(--grad); transform:translateY(-2px); }

/* projects */
.home .proj-cover{ transition:filter .5s var(--ease); filter:saturate(.95); }
.home .proj:hover .proj-cover{ filter:saturate(1.25) brightness(1.06); }
.home .proj-tag{ background:linear-gradient(120deg,rgba(42,114,240,.85),rgba(123,77,224,.85)); border-color:rgba(255,255,255,.3); }
.home .proj{ border-radius:20px; }

/* why band */
.home .band{ background:#050F22; }
.home .band::before{
  background:
    radial-gradient(760px 420px at 85% 0%, rgba(42,114,240,.32), transparent 62%),
    radial-gradient(640px 420px at 0% 100%, rgba(123,77,224,.28), transparent 60%);
}
.home .why-grid{ gap:var(--gap); background:none; border:none; overflow:visible; }
.home .why{ border-radius:20px; border:1px solid rgba(255,255,255,.1); background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.02)); transition:transform .35s var(--ease), border-color .35s var(--ease), background .35s; }
.home .why:hover{ transform:translateY(-5px); border-color:rgba(90,151,255,.5); background:linear-gradient(160deg,rgba(42,114,240,.18),rgba(123,77,224,.08)); }
.home .why svg{ width:46px; height:46px; padding:12px; border-radius:14px; color:#fff; background:linear-gradient(135deg,#2A72F0,#13B5EA); }
.home .why:nth-child(2) svg{ background:linear-gradient(135deg,#7B4DE0,#B06CF5); }
.home .why:nth-child(3) svg{ background:linear-gradient(135deg,#12B886,#38D9A9); }
.home .why:nth-child(4) svg{ background:linear-gradient(135deg,#F59F0B,#F76707); }
.home .band-photo{ border-radius:24px; }

/* CTA */
.home .cta::before{
  background:
    linear-gradient(110deg,rgba(11,33,64,.94) 25%,rgba(27,95,217,.7) 65%,rgba(123,77,224,.7)),
    url('https://images.unsplash.com/photo-1544197150-b99a580bb7a8?auto=format&fit=crop&w=1400&q=80') center/cover;
}
.home .cta::after{
  content:""; position:absolute; width:340px; height:340px; right:-80px; top:-120px; z-index:-1; border-radius:50%;
  background:radial-gradient(circle,rgba(19,181,234,.5),transparent 65%); animation:fxFloat 8s ease-in-out infinite;
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .hero-aurora span, .hv-side, .hv-card, .hv-ring, .hv-bars i, .mm-card::before, .fx-head::before, .fx-head::after,
  .masthead::after, .mega::before, .grad-text, .hero-mesh .flow, .home .cta::after{ animation:none!important; }
  .home .pillar{ transform:none!important; }
}