/* ============ SkyXunity — custom styles (Tailwind handles most layout) ============ */
:root{
  --navy:#070d33; --navy-2:#0d1a5c; --blue:#1d4ed8; --sky:#2f8bff; --ice:#e8f1ff;
  --ink:#0b1033; --muted:#5b6487;
}
html{scroll-behavior:smooth;overflow-x:hidden;overflow-x:clip}
body{font-family:"DM Sans",system-ui,sans-serif;color:var(--ink);background:#f6f8ff;overflow-x:hidden;overflow-x:clip}
.font-display{font-family:"Sora",system-ui,sans-serif;letter-spacing:-.02em}
::selection{background:var(--sky);color:#fff}

/* Material Symbols */
.material-symbols-rounded{font-variation-settings:"FILL" 0,"wght" 400,"GRAD" 0,"opsz" 24;vertical-align:middle;line-height:1}
.ms-fill{font-variation-settings:"FILL" 1,"wght" 500,"GRAD" 0,"opsz" 24}

/* gradient text like the logo */
.grad-text{background:linear-gradient(90deg,#7cc0ff,#2f8bff 45%,#9fd2ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.grad-text-dark{background:linear-gradient(90deg,var(--navy-2),var(--blue) 55%,var(--sky));-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- Scroll progress ---------- */
#scroll-progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:100;background:linear-gradient(90deg,var(--blue),var(--sky));box-shadow:0 0 10px var(--sky)}

/* ---------- Navbar ---------- */
.nav-wrap{transition:all .4s cubic-bezier(.2,.8,.2,1)}
.nav-wrap.scrolled .nav-inner{background:rgba(255,255,255,.82);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 10px 40px -12px rgba(13,26,92,.25);border-color:rgba(29,78,216,.08)}
.nav-wrap.scrolled{padding-top:.5rem}
.nav-link{position:relative;padding:.5rem .9rem;border-radius:999px;font-weight:500;transition:color .25s,background .25s}
.nav-link:hover{background:rgba(29,78,216,.07);color:var(--blue)}
.nav-link.active{color:#fff;background:linear-gradient(135deg,var(--navy-2),var(--blue))}
.mobile-menu{transform:translateY(-12px) scale(.98);opacity:0;pointer-events:none;transition:all .35s cubic-bezier(.2,.8,.2,1)}
.mobile-menu.open{transform:none;opacity:1;pointer-events:auto}

/* ---------- Material-style buttons + ripple ---------- */
.btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:.5rem;padding:.9rem 1.6rem;border-radius:999px;font-weight:600;transition:transform .25s,box-shadow .25s,background .25s;isolation:isolate}
.btn:hover{transform:translateY(-2px)}
.btn-primary{color:#fff;background:linear-gradient(135deg,var(--blue),var(--sky));box-shadow:0 12px 30px -10px rgba(47,139,255,.7)}
.btn-primary:hover{box-shadow:0 18px 40px -12px rgba(47,139,255,.9)}
.btn-ghost{color:#fff;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.06);backdrop-filter:blur(8px)}
.btn-ghost:hover{background:rgba(255,255,255,.14)}
.btn-outline{color:var(--blue);border:1.5px solid rgba(29,78,216,.25);background:#fff}
.btn-outline:hover{border-color:var(--blue)}
.ripple{position:absolute;border-radius:50%;transform:scale(0);animation:ripple .6s linear;background:rgba(255,255,255,.45);pointer-events:none;z-index:-1}
.btn-outline .ripple{background:rgba(29,78,216,.18)}
@keyframes ripple{to{transform:scale(4);opacity:0}}

/* ---------- Cards (Material elevation) ---------- */
.card{background:#fff;border-radius:1.5rem;border:1px solid rgba(13,26,92,.06);box-shadow:0 1px 2px rgba(13,26,92,.04),0 8px 24px -12px rgba(13,26,92,.12);transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s}
.card-hover:hover{transform:translateY(-8px);box-shadow:0 2px 4px rgba(13,26,92,.04),0 30px 60px -20px rgba(29,78,216,.35)}
.icon-tile{width:3.5rem;height:3.5rem;border-radius:1rem;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,var(--navy-2),var(--sky));box-shadow:0 10px 25px -10px rgba(47,139,255,.8)}
.icon-tile .material-symbols-rounded{font-size:28px}

/* ===================================================================
   ROLL-ON-SCROLL — content unrolls like a scroll / paper roll
   =================================================================== */
.roll{opacity:0;transform:perspective(1100px) rotateX(-70deg) translateY(50px);transform-origin:50% 0;transition:opacity .9s cubic-bezier(.2,.8,.2,1),transform 1.1s cubic-bezier(.2,.9,.25,1);will-change:transform,opacity}
.roll-up{opacity:0;transform:translateY(60px);transition:opacity .9s ease,transform 1s cubic-bezier(.2,.8,.2,1)}
.roll-left{opacity:0;transform:perspective(1100px) rotateY(35deg) translateX(-60px);transform-origin:0 50%;transition:opacity .9s ease,transform 1.1s cubic-bezier(.2,.9,.25,1)}
.roll-right{opacity:0;transform:perspective(1100px) rotateY(-35deg) translateX(60px);transform-origin:100% 50%;transition:opacity .9s ease,transform 1.1s cubic-bezier(.2,.9,.25,1)}
.roll-zoom{opacity:0;transform:scale(.88);transition:opacity .9s ease,transform 1.1s cubic-bezier(.2,.9,.25,1)}
.in-view{opacity:1!important;transform:none!important}

/* split-word headline roll */
.word{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.08em}
.word>span{display:inline-block;transform:translateY(110%) rotateX(-80deg);transform-origin:50% 100%;transition:transform 1s cubic-bezier(.2,.9,.25,1)}
.in-view .word>span{transform:none}

/* ---------- Hero ---------- */
.hero{background:radial-gradient(1200px 600px at 80% -10%,rgba(47,139,255,.35),transparent 60%),radial-gradient(900px 500px at -10% 110%,rgba(29,78,216,.45),transparent 60%),linear-gradient(160deg,#050a28,#0b1650 55%,#0a1240)}
.hero-grid{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:56px 56px;mask-image:radial-gradient(ellipse at center,#000 30%,transparent 75%)}
.orbit{position:absolute;border-radius:50%;border:1.5px solid transparent;border-top-color:rgba(124,192,255,.7);border-left-color:rgba(124,192,255,.25);animation:spin 18s linear infinite}
.orbit.o2{animation-duration:28s;animation-direction:reverse;border-top-color:rgba(255,255,255,.35)}
@keyframes spin{to{transform:rotate(360deg)}}
.float{animation:float 6s ease-in-out infinite}
.float-2{animation:float 7s ease-in-out -2s infinite}
@keyframes float{50%{transform:translateY(-14px)}}
.plane-path{stroke-dasharray:6 10;animation:dash 30s linear infinite}
@keyframes dash{to{stroke-dashoffset:-600}}
.typed-caret{display:inline-block;width:3px;height:.9em;background:var(--sky);margin-left:4px;vertical-align:-.05em;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.glass{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.page-hero{background:radial-gradient(800px 400px at 85% 0,rgba(47,139,255,.4),transparent 60%),linear-gradient(160deg,#050a28,#0d1a5c)}

/* ---------- Flags marquee ---------- */
.marquee{mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.marquee-track{display:flex;gap:1rem;width:max-content;animation:marquee 45s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-track.reverse{animation-direction:reverse;animation-duration:55s}
@keyframes marquee{to{transform:translateX(-50%)}}
.flag-chip{display:flex;align-items:center;gap:.7rem;padding:.65rem 1.2rem .65rem .65rem;border-radius:999px;background:#fff;border:1px solid rgba(13,26,92,.08);box-shadow:0 6px 20px -12px rgba(13,26,92,.3);white-space:nowrap;font-weight:600}
.flag-chip img{width:34px;height:34px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px #fff,0 0 0 3px rgba(29,78,216,.15)}

/* ---------- Journey timeline ---------- */
.timeline-line{background:linear-gradient(var(--blue),var(--sky));transform-origin:top;transform:scaleY(var(--p,0));transition:transform .1s linear}

/* ---------- Gallery carousel (3D coverflow, built in main.js) ---------- */
.gallery-stage{perspective:1600px}
.g-slide{position:absolute;top:0;left:50%;width:min(78vw,560px);aspect-ratio:4/3;margin-left:calc(min(78vw,560px)/-2);border-radius:1.5rem;overflow:hidden;transition:transform .8s cubic-bezier(.2,.8,.2,1),opacity .8s,filter .8s;box-shadow:0 30px 60px -25px rgba(5,10,40,.6);cursor:pointer}
.g-slide img{width:100%;height:100%;object-fit:cover}
.g-slide .cap{position:absolute;inset:auto 0 0 0;padding:1.2rem 1.4rem;color:#fff;font-weight:600;background:linear-gradient(transparent,rgba(5,10,40,.8))}
.g-thumbs{scrollbar-width:none}.g-thumbs::-webkit-scrollbar{display:none}
.g-thumb{flex:0 0 auto;width:84px;height:60px;border-radius:.75rem;overflow:hidden;opacity:.5;transition:all .3s;border:2px solid transparent}
.g-thumb.active{opacity:1;border-color:var(--sky);transform:translateY(-3px)}
.g-thumb img{width:100%;height:100%;object-fit:cover}

/* Lightbox */
#lightbox{position:fixed;inset:0;z-index:90;background:rgba(5,10,40,.92);display:none;align-items:center;justify-content:center;padding:1rem}
#lightbox.open{display:flex;animation:fadein .3s}
@keyframes fadein{from{opacity:0}}

/* ---------- Reviews slider ---------- */
.review-track{display:flex;transition:transform .7s cubic-bezier(.2,.8,.2,1)}

/* ---------- FAQ accordion ---------- */
.faq-item .faq-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s cubic-bezier(.2,.8,.2,1)}
.faq-item .faq-body>div{overflow:hidden}
.faq-item.open .faq-body{grid-template-rows:1fr}
.faq-item.open .faq-icon{transform:rotate(45deg);background:var(--blue);color:#fff}
.faq-icon{transition:all .35s}
.faq-item.open{border-color:rgba(29,78,216,.3);box-shadow:0 20px 40px -24px rgba(29,78,216,.45)}

/* ---------- Material filled text fields ---------- */
.field{position:relative}
.field input,.field textarea,.field select{width:100%;padding:1.5rem 1rem .55rem;border-radius:.9rem .9rem 0 0;background:#eef2fc;border:0;border-bottom:2px solid #c3cbe6;outline:none;transition:all .25s;font-size:1rem;color:var(--ink)}
.field textarea{min-height:130px;resize:vertical}
.field label{position:absolute;left:1rem;top:1.05rem;color:var(--muted);pointer-events:none;transition:all .2s;font-size:1rem}
.field input:focus,.field textarea:focus,.field select:focus{background:#e5ecfd;border-bottom-color:var(--blue)}
.field input:focus+label,.field input:not(:placeholder-shown)+label,
.field textarea:focus+label,.field textarea:not(:placeholder-shown)+label,
.field select+label{top:.4rem;font-size:.75rem;color:var(--blue);font-weight:600}

/* chips (Material) */
.chip{padding:.5rem 1rem;border-radius:.6rem;border:1px solid #c9d2ee;background:#fff;font-weight:500;font-size:.9rem;transition:all .2s;display:inline-flex;align-items:center;gap:.35rem}
.chip:hover{background:#eef2fc}
.chip.active{background:var(--ice);border-color:var(--blue);color:var(--blue)}

/* WhatsApp FAB */
.fab{position:fixed;right:1.25rem;bottom:1.25rem;z-index:60;width:3.6rem;height:3.6rem;border-radius:1.1rem;display:grid;place-items:center;background:#25d366;color:#fff;box-shadow:0 14px 30px -10px rgba(37,211,102,.8);transition:transform .25s}
.fab:hover{transform:scale(1.08) rotate(-6deg)}
.fab::after{content:"";position:absolute;inset:0;border-radius:inherit;border:2px solid #25d366;animation:pulse 2s infinite}
@keyframes pulse{to{transform:scale(1.5);opacity:0}}
#to-top{position:fixed;right:1.45rem;bottom:5.8rem;z-index:60;opacity:0;transform:translateY(10px);transition:all .3s;pointer-events:none}
#to-top.show{opacity:1;transform:none;pointer-events:auto}

/* blog article */
.prose-sky p{margin:0 0 1.15rem;line-height:1.85;color:#2b3157;font-size:1.075rem}
.prose-sky h2{font-family:"Sora";font-size:1.5rem;font-weight:700;margin:2.2rem 0 .8rem;color:var(--navy-2)}

/* image fallback */
img.img-fallback{background:linear-gradient(135deg,#0d1a5c,#2f8bff)}

/* page loader */
#loader{position:fixed;inset:0;z-index:200;background:#050a28;display:grid;place-items:center;transition:opacity .6s,visibility .6s}
#loader.hide{opacity:0;visibility:hidden}
#loader img{width:110px;height:110px;border-radius:50%;background:#fff;padding:6px;animation:pop 1.2s ease-in-out infinite}
@keyframes pop{50%{transform:scale(1.08);box-shadow:0 0 0 18px rgba(47,139,255,.15)}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .roll,.roll-up,.roll-left,.roll-right,.roll-zoom{opacity:1;transform:none}
  .word>span{transform:none}
}