/* ──────────────────────────────────────────────────────────
   FictionX – Oman Vision 2040 section (`#servicesX.fx-vision`)
   Showcase: three browser mockups + unified quick-access grid.
   No shadows on buttons per template UI rule.
   ────────────────────────────────────────────────────────── */

/* ===== Section wrapper ===== */
.fx-vision{
    position:relative;
    overflow:hidden;
    isolation:isolate;
    padding:60px 0 70px;
    background:
        radial-gradient(900px 500px at 100% 0%, rgba(165,19,19,.05), transparent 60%),
        radial-gradient(900px 500px at 0% 100%, rgba(15,23,42,.04), transparent 60%),
        #f4f5f7;
}
.fx-vision::before{
    content:"";
    position:absolute;
    top:-100px;inset-inline-end:-100px;
    width:340px;height:340px;border-radius:50%;
    background:radial-gradient(closest-side, rgba(165,19,19,.06), transparent 70%);
    pointer-events:none;
    z-index:0;
}
.fx-vision > .container{position:relative;z-index:1;}

/* ===== Heading & intro ===== */
.fx-vision .heading.main-heading{margin-bottom:16px;}
.fx-vision .heading.main-heading h4.sub-title{
    font-size:34px;font-weight:800;letter-spacing:.2px;margin:0;color:#15202b;
}
.fx-vision .heading-separator{margin-top:14px;}
.fx-vision__intro{
    max-width:780px;
    margin:0 auto 30px;
    text-align:center;
    font-size:15px;line-height:2;color:#52606d;
}

/* ===== Browser showcase ===== */
.fx-vision__showcase{
    position:relative;
    text-align:center;
    margin:6px auto 34px;
    min-height:450px;
    padding-top:34px;
}
/* soft spotlight glow behind the main mockup */
.fx-vision__showcase::before{
    content:"";
    position:absolute;
    top:4%;
    left:50%;
    width:min(74%,780px);
    height:80%;
    transform:translateX(-50%);
    background:radial-gradient(60% 60% at 50% 38%,
        rgba(165,19,19,.12), rgba(165,19,19,.05) 45%, transparent 72%);
    filter:blur(8px);
    z-index:0;
    pointer-events:none;
}
/* grounding ellipse under the mockups (depth without a card shadow) */
.fx-vision__showcase::after{
    content:"";
    position:absolute;
    left:50%;
    bottom:4px;
    width:min(58%,540px);
    height:34px;
    transform:translateX(-50%);
    background:radial-gradient(closest-side,
        rgba(15,23,42,.20), rgba(15,23,42,.06) 60%, transparent 76%);
    filter:blur(4px);
    z-index:0;
    pointer-events:none;
}
.fx-vision__showcase .fx-vision__laptop{
    display:inline-block;
    vertical-align:bottom;
    position:relative;
    z-index:1;
    transition:transform .55s cubic-bezier(.22,.61,.36,1),
               filter .55s ease;
}
.fx-vision__showcase .fx-vision__laptop--main{
    width:60%;max-width:660px;height:auto;
    z-index:3;
    animation:fxVisionFloat 6s ease-in-out infinite;
}
.fx-vision__showcase .fx-vision__laptop--side{
    position:absolute;
    width:34%;max-width:360px;height:auto;
    bottom:12px;
    z-index:2;
    opacity:.97;
}
.fx-vision__showcase .fx-vision__laptop--left{
    inset-inline-start:6%;
}
.fx-vision__showcase .fx-vision__laptop--right{
    inset-inline-end:6%;
}
.fx-vision__showcase:hover .fx-vision__laptop--main{
    transform:translateY(-8px) scale(1.015);
    animation-play-state:paused;
}
.fx-vision__showcase:hover .fx-vision__laptop--left{
    transform:translateY(-4px) translateX(-10px) rotate(-1deg);
}
.fx-vision__showcase:hover .fx-vision__laptop--right{
    transform:translateY(-4px) translateX(10px) rotate(1deg);
}

@keyframes fxVisionFloat{
    0%,100%{transform:translateY(0);}
    50%{transform:translateY(-10px);}
}

/* Decorative divider — keep template's structure but trim spacing */
.fx-vision__divider{padding:14px 0 28px;text-align:center;}
.fx-vision__divider img{opacity:.55;margin:0 3px;vertical-align:middle;}

/* ===== Quick-access grid ===== */
.fx-vision__cards{
    display:grid;
    gap:14px;
    grid-template-columns:repeat(2,minmax(0,1fr));
}
.fx-vision__cards--secondary{
    grid-template-columns:repeat(4,minmax(0,1fr));
    margin-top:16px;
}

/* ===== Card (primary + secondary share base) ===== */
.fx-vision-card{
    position:relative;
    display:flex;align-items:center;gap:14px;
    padding:18px 22px;
    background:#fff;
    border:1px solid rgba(15,23,42,.08);
    border-radius:4px;
    text-decoration:none !important;
    color:inherit !important;
    overflow:hidden;
    isolation:isolate;
    transition:transform .3s cubic-bezier(.22,.61,.36,1),
               border-color .3s ease,
               background .3s ease;
}
.fx-vision-card::before{
    content:"";
    position:absolute;
    top:0;inset-inline-start:0;
    width:3px;height:100%;
    background:linear-gradient(180deg,#a51313,#7d0f0f);
    transform:scaleY(.0);
    transform-origin:top;
    transition:transform .35s ease;
}
.fx-vision-card:hover{
    transform:translateY(-3px);
    border-color:rgba(165,19,19,.30);
    background:#fff;
}
.fx-vision-card:hover::before{transform:scaleY(1);}

/* Icon circle */
.fx-vision-card__icon{
    flex-shrink:0;
    display:inline-flex;align-items:center;justify-content:center;
    width:46px;height:46px;
    border-radius:4px;
    background:rgba(165,19,19,.08);
    color:#a51313;
    font-size:18px;
    transition:background .3s ease,transform .35s cubic-bezier(.22,.61,.36,1),color .3s ease;
}
.fx-vision-card:hover .fx-vision-card__icon{
    background:#a51313;
    color:#fff;
    transform:rotate(-6deg) scale(1.06);
}

/* Body */
.fx-vision-card__body{
    flex:1;min-width:0;
}
.fx-vision-card__title{
    margin:0;
    font-size:15px;font-weight:700;line-height:1.4;
    color:#15202b;
    transition:color .25s ease;
}
.fx-vision-card:hover .fx-vision-card__title{color:#a51313;}
.fx-vision-card__sub{
    margin:3px 0 0;
    font-size:12px;line-height:1.4;color:#7a8590;font-weight:500;
}

/* CSS chevron — direction-aware */
.fx-vision-card__arrow{
    flex-shrink:0;
    width:8px;height:8px;
    border-top:2px solid #b0b8c2;
    border-inline-end:2px solid #b0b8c2;
    transform:rotate(-135deg);                /* RTL default → points to start */
    transition:transform .3s ease,border-color .3s ease,margin .3s ease;
}
[dir="ltr"] .fx-vision-card__arrow{transform:rotate(45deg);}
.fx-vision-card:hover .fx-vision-card__arrow{
    border-color:#a51313;
    margin-inline-end:-4px;
}

/* Secondary cards (4-up): tighter padding, smaller icon */
.fx-vision__cards--secondary .fx-vision-card{
    padding:14px 16px;
    gap:10px;
}
.fx-vision__cards--secondary .fx-vision-card__icon{
    width:38px;height:38px;font-size:15px;border-radius:4px;
}
.fx-vision__cards--secondary .fx-vision-card__title{font-size:13.5px;}

/* ===== Responsive ===== */
@media (max-width:991px){
    .fx-vision{padding:50px 0 60px;}
    .fx-vision .heading.main-heading h4.sub-title{font-size:26px;}
    .fx-vision__showcase{min-height:auto;padding-top:10px;}
    .fx-vision__showcase::before{height:60%;}
    .fx-vision__showcase::after{display:none;}
    .fx-vision__showcase .fx-vision__laptop{
        display:block;
        margin:14px auto;
        position:relative !important;
        inset:auto !important;
        width:90% !important;max-width:560px;
        transform:none !important;
        animation:none !important;
    }
    .fx-vision__cards--secondary{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:600px){
    .fx-vision__cards{grid-template-columns:1fr;}
    .fx-vision__cards--secondary{grid-template-columns:1fr;}
    .fx-vision__intro{font-size:13.5px;}
}

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion:reduce){
    .fx-vision__laptop,
    .fx-vision-card,
    .fx-vision-card::before,
    .fx-vision-card__icon,
    .fx-vision-card__title,
    .fx-vision-card__arrow{
        transition:none !important;
    }
    .fx-vision__showcase .fx-vision__laptop--main{animation:none !important;}
    .fx-vision-card:hover,
    .fx-vision__showcase:hover .fx-vision__laptop{transform:none !important;}
}