/* Fanadiquna home art v1 — scroll reveals, living sections, bento cities, wave dividers (loaded after hero.css on the home page only) */
.fq3 .trustbar{background:#fff;border-bottom:1px solid var(--line);position:relative;z-index:3}
.fq3 .trustbar ul{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;list-style:none;margin:0;padding:18px 0}
.fq3 .trustbar li{display:flex;align-items:center;gap:12px;font-weight:600;font-size:14.5px;color:var(--navy);line-height:1.55}
.fq3 .trustbar .ti{flex:none;width:46px;height:46px;border-radius:15px;background:linear-gradient(135deg,#DDF2F7,#F3FAFC);color:var(--btn);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.fq3 .trustbar .ti .ic{width:22px;height:22px}
.fq3 .trustbar .ti::after{content:'';position:absolute;top:0;bottom:0;left:-80%;width:50%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.9),transparent);transform:skewX(-18deg);animation:fqShineSweep 6s ease-in-out infinite}
.fq3 .trustbar li:nth-child(2) .ti::after{animation-delay:.8s}.fq3 .trustbar li:nth-child(3) .ti::after{animation-delay:1.6s}.fq3 .trustbar li:nth-child(4) .ti::after{animation-delay:2.4s}
@keyframes fqShineSweep{0%,70%{left:-80%}100%{left:150%}}
/* scroll reveal (individual transform props so hover transforms stay independent) */
.fq-js .fq3 :is(.sec .head,.head-row,.welcome,.collage,.help,.cta,.car,.trustbar li,.faq .t):not(.in){opacity:0;translate:0 36px}
.fq-js .fq3 :is(.step,.city,.feat,.art,.acc details):not(.in){opacity:0;translate:0 36px}
.fq3 :is(.sec .head,.head-row,.welcome,.collage,.help,.cta,.car,.trustbar li,.faq .t){transition:opacity .85s cubic-bezier(.2,.8,.2,1),translate .85s cubic-bezier(.2,.8,.2,1)}
.fq3 :is(.step,.city,.feat,.art,.acc details){transition:opacity .85s cubic-bezier(.2,.8,.2,1),translate .85s cubic-bezier(.2,.8,.2,1),transform .4s cubic-bezier(.2,.8,.2,1),box-shadow .4s ease,border-color .3s ease}
/* section headings: growing underline */
.fq3 .sec .head h2::after,.fq3 .head-row .t h2::after{content:'';display:block;width:64px;height:4px;border-radius:4px;margin:12px auto 0;background:linear-gradient(90deg,#19B2C4,#7FE0EC);transform:scaleX(0);transition:transform .9s cubic-bezier(.2,.8,.2,1) .35s}
.fq3 .head-row .t h2::after{margin-inline:0}
.fq3 .sec .head.in h2::after,.fq3 .head-row.in .t h2::after{transform:scaleX(1)}
/* welcome card */
.fq3 .welcome::after{content:'';position:absolute;inset:0;border-radius:24px;padding:1.5px;background:linear-gradient(120deg,rgba(25,178,196,0),rgba(25,178,196,.65),rgba(11,58,94,.0),rgba(25,178,196,.65),rgba(25,178,196,0));background-size:300% 100%;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);animation:fqBorder 9s linear infinite;pointer-events:none;z-index:2}
@keyframes fqBorder{to{background-position:-300% 0}}
.fq3 .welcome-media .media img{animation:fqKb 20s ease-in-out infinite alternate}
@keyframes fqKb{from{transform:scale(1.02)}to{transform:scale(1.12) translate(-1.5%,-1%)}}
.fq3 .badge{animation:fqFloat 5.5s ease-in-out infinite}
@keyframes fqFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.fq3 .stat{transition:transform .35s,box-shadow .35s,background .35s}
.fq3 .stat:hover{transform:translateY(-5px);box-shadow:0 14px 28px rgba(11,58,94,.12);background:#DDF2F7}
/* steps: route line with a traveling plane */
.fq3 .steps{position:relative}
.fq3 .steps::before{content:'';position:absolute;top:60px;inset-inline:11%;border-top:2px dashed #B7DCE3;z-index:0}
.fq3 .steps::after{content:'';position:absolute;top:47px;right:11%;width:26px;height:26px;z-index:3;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath transform='rotate(-90 12 12)' fill='%230B8596' d='M21 16v-2l-8-5V3.5c0-.83-.67-1.5-1.5-1.5S10 2.67 10 3.5V9l-8 5v2l8-2.5V19l-2 1.5V22l3.5-1 3.5 1v-1.5L13 19v-5.5l8 2.5z'/%3E%3C/svg%3E") center/contain no-repeat;animation:fqRoute 8s ease-in-out infinite}
@keyframes fqRoute{0%{right:11%;opacity:0}8%{opacity:1}92%{opacity:1}100%{right:calc(89% - 26px);opacity:0}}
.fq3 .step{z-index:1}
.fq3 .step:hover{transform:translateY(-8px);box-shadow:0 22px 44px rgba(11,58,94,.14);border-color:#B7DCE3}
.fq3 .step .num{animation:fqRing 2.8s ease-out infinite}
.fq3 .step:nth-child(2) .num{animation-delay:.5s}.fq3 .step:nth-child(3) .num{animation-delay:1s}.fq3 .step:nth-child(4) .num{animation-delay:1.5s}
@keyframes fqRing{0%{box-shadow:0 0 0 0 rgba(11,133,150,.45)}70%,100%{box-shadow:0 0 0 12px rgba(11,133,150,0)}}
.fq3 .step .bigic{transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.fq3 .step:hover .bigic{transform:rotate(-8deg) scale(1.12)}
/* destination cards */
.fq3 .dest{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--ty,0));transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .4s}
.fq3 .dest:hover{--ty:-10px;box-shadow:0 28px 54px rgba(11,58,94,.32)}
.fq3 .dest .media img{transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.fq3 .dest:hover .media img{transform:scale(1.13)}
.fq3 .dest .cap{transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.fq3 .dest:hover .cap{transform:translateY(-6px)}
.fq3 .dest .cap::after{content:'\0627\0633\062A\0643\0634\0641  \0627\0644\0623\062F\0644\0629  \2190';font-size:12.5px;font-weight:700;color:#7FE0EC;opacity:0;transform:translateY(6px);transition:opacity .35s,transform .35s;margin-top:4px}
.fq3 .dest:hover .cap::after,.fq3 .dest:focus-visible .cap::after{opacity:1;transform:none}
.fq3 .dest::before{content:'';position:absolute;top:0;bottom:0;left:-80%;width:50%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.3),transparent);transform:skewX(-18deg);z-index:2;transition:left .9s;pointer-events:none}
.fq3 .dest:hover::before{left:150%}
@media (hover:none){.fq3 .dest .cap::after{opacity:1;transform:none}}
/* guide cards */
.fq3 .gcard{transition:transform .4s cubic-bezier(.2,.8,.2,1),box-shadow .4s}
.fq3 .gcard:hover{transform:translateY(-8px);box-shadow:0 24px 48px rgba(11,58,94,.16)}
.fq3 .gcard .media img{transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.fq3 .gcard:hover .media img{transform:scale(1.08)}
.fq3 .gcard .price .ic{transition:transform .3s}
.fq3 .gcard:hover .price .ic{transform:translate(-3px,-3px)}
/* bento city tiles */
.fq3 .cities{grid-auto-rows:clamp(150px,15vw,190px);gap:16px}
.fq3 .city{position:relative;display:block;border:0;border-radius:22px;overflow:hidden;color:#fff;background:#D3E5EA;box-shadow:var(--shadow);transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--ty,0))}
.fq3 .city:hover{--ty:-8px;color:#fff;box-shadow:0 26px 50px rgba(11,58,94,.26)}
.fq3 .city .media{position:absolute;inset:0;aspect-ratio:auto;width:100%;height:100%}
.fq3 .city .media img{transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.fq3 .city:hover .media img{transform:scale(1.1)}
.fq3 .city::after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,rgba(6,32,58,.92) 0%,rgba(6,32,58,.45) 42%,rgba(6,32,58,0) 76%)}
.fq3 .city .t{position:absolute;z-index:2;inset-inline:18px;bottom:15px;padding:0;display:flex;flex-direction:column;gap:2px}
.fq3 .city b{color:#fff!important;font-size:20px;line-height:1.4;text-shadow:0 2px 10px rgba(0,0,0,.5)}
.fq3 .city .t span{color:#E3F1F6!important;font-size:13px}
.fq3 .city:first-child{grid-column:span 2;grid-row:span 2}
.fq3 .city:first-child b{font-size:30px}
.fq3 .city:nth-child(4){grid-column:span 2}
@media (max-width:1024px){.fq3 .city:first-child{grid-row:span 1}}
@media (max-width:600px){.fq3 .city{height:210px}.fq3 .city:first-child,.fq3 .city:nth-child(4){grid-column:auto;grid-row:auto}.fq3 .city:first-child b{font-size:22px}}
/* why-us */
.fq3 .feat:hover{transform:translateY(-8px);box-shadow:0 22px 44px rgba(11,58,94,.14);border-color:#B7DCE3}
.fq3 .feat .bigic{position:relative}
.fq3 .feat .bigic::after{content:'';position:absolute;inset:-5px;border-radius:50%;background:conic-gradient(from 0deg,#19B2C4,#7FE0EC,#0B3A5E,#19B2C4);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2px));mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2px));opacity:0;transition:opacity .3s;animation:fqSpin 4s linear infinite}
.fq3 .feat:hover .bigic::after{opacity:1}
@keyframes fqSpin{to{transform:rotate(360deg)}}
.fq3 .collage .a{animation:fqFloatA 7s ease-in-out infinite}
.fq3 .collage .b{animation:fqFloatB 6s ease-in-out infinite}
.fq3 .collage .tag{animation:fqFloatT 5s ease-in-out infinite}
@keyframes fqFloatA{0%,100%{transform:rotate(-3deg) translateY(0)}50%{transform:rotate(-2deg) translateY(-12px)}}
@keyframes fqFloatB{0%,100%{transform:rotate(4deg) translateY(0)}50%{transform:rotate(3deg) translateY(10px)}}
@keyframes fqFloatT{0%,100%{transform:rotate(-3deg) translateY(0)}50%{transform:rotate(-4deg) translateY(-8px)}}
/* articles */
.fq3 .art:hover{transform:translateY(-8px);box-shadow:0 24px 48px rgba(11,58,94,.16)}
.fq3 .art .media img{transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.fq3 .art:hover .media img{transform:scale(1.08)}
.fq3 .art h3 a{transition:color .25s}
.fq3 .art:hover h3 a{color:var(--teal-ink)}
/* faq */
.fq3 .acc details:hover{border-color:#B7DCE3;box-shadow:0 10px 24px rgba(11,58,94,.07)}
.fq3 .acc details[open]{border-color:#7FD3DF;box-shadow:0 14px 30px rgba(11,133,150,.12)}
.fq3 .acc details[open] .ans{animation:fqFade .4s ease}
@keyframes fqFade{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media (min-width:821px){.fq3 .help-card{animation:fqFloatY 6s ease-in-out infinite}@keyframes fqFloatY{0%,100%{transform:translateY(-50%)}50%{transform:translateY(calc(-50% - 10px))}}}
/* cta band */
.fq3 .cta{background-size:220% 220%;animation:fqGrad 14s ease-in-out infinite alternate}
@keyframes fqGrad{from{background-position:0% 50%}to{background-position:100% 50%}}
.fq3 .cta::after{content:'';position:absolute;top:16px;left:0;width:24px;height:24px;z-index:1;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath transform='rotate(90 12 12)' fill='%23B8F0F8' d='M21 16v-2l-8-5V3.5c0-.83-.67-1.5-1.5-1.5S10 2.67 10 3.5V9l-8 5v2l8-2.5V19l-2 1.5V22l3.5-1 3.5 1v-1.5L13 19v-5.5l8 2.5z'/%3E%3C/svg%3E") center/contain no-repeat;animation:fqCtaFly 16s linear infinite;pointer-events:none}
@keyframes fqCtaFly{from{left:-40px}to{left:100%}}
.fq3 .cta .btn-wa{position:relative}
.fq3 .cta .btn-wa::after{content:'';position:absolute;inset:0;border-radius:inherit;box-shadow:0 0 0 0 rgba(30,142,78,.55);animation:fqPulseG 2.6s ease-out infinite;pointer-events:none}
@keyframes fqPulseG{0%{box-shadow:0 0 0 0 rgba(30,142,78,.55)}70%,100%{box-shadow:0 0 0 14px rgba(30,142,78,0)}}
/* animated wave dividers between sections */
.fq3 .sec.wave,.fq3 .sec.tinted{position:relative}
.fq3 .sec.wave::before,.fq3 .sec.tinted::before{content:'';position:absolute;top:-1px;left:0;right:0;height:34px;z-index:1;pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 34'%3E%3Cpath d='M0 0H1440V17Q1260 34 1080 17T720 17T360 17T0 17Z' fill='%23fff'/%3E%3C/svg%3E") repeat-x;background-size:1440px 34px;animation:fqwave2 30s linear infinite}
/* page scroll progress */
.fq-prog{position:fixed;top:0;left:0;right:0;height:3px;z-index:2000;transform-origin:right center;transform:scaleX(var(--p,0));background:linear-gradient(90deg,#7FE0EC,#19B2C4,#0B3A5E);pointer-events:none}
@media (max-width:1024px){.fq3 .steps::before,.fq3 .steps::after{display:none}.fq3 .trustbar ul{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:720px){.fq3 .trustbar ul{gap:10px;padding:14px 0}.fq3 .trustbar li{font-size:13px;gap:10px}.fq3 .trustbar .ti{width:40px;height:40px;border-radius:12px}}
@media (prefers-reduced-motion:reduce){
 .fq-js .fq3 :is(.sec .head,.head-row,.welcome,.collage,.help,.cta,.car,.trustbar li,.faq .t,.step,.city,.feat,.art,.acc details):not(.in){opacity:1!important;translate:none!important}
 .fq3 .welcome::after,.fq3 .welcome-media .media img,.fq3 .badge,.fq3 .step .num,.fq3 .steps::after,.fq3 .collage .a,.fq3 .collage .b,.fq3 .collage .tag,.fq3 .cta,.fq3 .cta::after,.fq3 .cta .btn-wa::after,.fq3 .sec.wave::before,.fq3 .sec.tinted::before,.fq3 .trustbar .ti::after,.fq3 .help-card{animation:none!important}
}