﻿/* ============================================================
   FinVillaHub P20.12 — 26H.2 Immersive Homepage
   Dedicated presentation layer.
   ============================================================ */

.fvh-immersive-home{
    --ih-bg:#030609;
    --ih-panel:#0a1015;
    --ih-panel2:#0d151a;
    --ih-line:rgba(255,255,255,.10);
    --ih-text:#f5f1e8;
    --ih-muted:rgba(245,241,232,.58);
    --ih-gold:#e1bd73;
    --ih-gold2:#f1d899;
    --ih-teal:#55ddc4;
    --ih-width:min(1380px,calc(100% - 48px));
    position:relative;
    overflow:hidden;
    color:var(--ih-text);
    background:
        radial-gradient(circle at 72% 8%,rgba(225,189,115,.09),transparent 24%),
        radial-gradient(circle at 22% 28%,rgba(85,221,196,.055),transparent 28%),
        var(--ih-bg);
    font-family:inherit;
}

.fvh-immersive-home *{box-sizing:border-box}

.fvh-immersive-home a{text-decoration:none}

.ih-hero{
    position:relative;
    min-height:860px;
    width:100%;
    display:grid;
    grid-template-columns:1.02fr .98fr;
    align-items:center;
    padding:90px 6vw 70px;
    overflow:hidden;
    background:
        linear-gradient(90deg,rgba(2,5,8,.98) 0%,rgba(2,5,8,.80) 43%,rgba(2,5,8,.18) 100%),
        linear-gradient(180deg,rgba(2,5,8,.10),rgba(2,5,8,.88)),
        url("/static/finvillahub/assets/hero-cinematic.jpg") center/cover;
}

.ih-hero::after{
    content:"";
    position:absolute;
    inset:auto 0 0;
    height:240px;
    background:linear-gradient(transparent,var(--ih-bg));
    pointer-events:none;
}

.ih-hero-atmosphere{
    position:absolute;
    width:720px;
    height:720px;
    right:2%;
    top:5%;
    border-radius:50%;
    background:radial-gradient(circle,rgba(85,221,196,.10),rgba(225,189,115,.055) 28%,transparent 68%);
    filter:blur(20px);
    animation:ih-pulse 8s ease-in-out infinite;
}

.ih-hero-grid{
    position:absolute;
    inset:0;
    opacity:.14;
    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:80px 80px;
    mask-image:linear-gradient(90deg,transparent,black 45%,transparent);
}

.ih-hero-copy{
    position:relative;
    z-index:5;
    max-width:780px;
}

.ih-eyebrow,
.ih-section-head > span,
.ih-formula-copy > span,
.ih-knowledge-copy > span,
.ih-community-copy > span,
.ih-final > span{
    color:var(--ih-gold2);
    font-size:.66rem;
    font-weight:800;
    letter-spacing:.20em;
    text-transform:uppercase;
}

.ih-hero h1{
    margin:28px 0 24px;
    max-width:760px;
    font-size:clamp(4rem,7.5vw,8.6rem);
    line-height:.86;
    letter-spacing:-.075em;
    font-weight:800;
}

.ih-hero h1 span{
    display:block;
    background:linear-gradient(100deg,#f7f2e9,var(--ih-gold2),#8fe5d1);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
}

.ih-hero-lead{
    max-width:590px;
    color:var(--ih-muted);
    font-size:1.05rem;
    line-height:1.8;
}

.ih-actions{
    display:flex;
    gap:14px;
    flex-wrap:wrap;
    margin-top:30px;
}

.ih-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:48px;
    padding:0 25px;
    border-radius:999px;
    font-size:.68rem;
    font-weight:800;
    letter-spacing:.10em;
    text-transform:uppercase;
    transition:.35s ease;
}

.ih-btn-gold{
    color:#17130b;
    background:linear-gradient(135deg,#e4bf74,#f4dc9e);
    box-shadow:0 15px 50px rgba(225,189,115,.20);
}

.ih-btn-gold:hover{
    transform:translateY(-4px);
    box-shadow:0 22px 65px rgba(225,189,115,.32);
}

.ih-btn-outline{
    color:var(--ih-text);
    border:1px solid rgba(255,255,255,.20);
    background:rgba(255,255,255,.025);
    backdrop-filter:blur(15px);
}

.ih-btn-outline:hover{
    transform:translateY(-4px);
    border-color:rgba(225,189,115,.5);
}

.ih-hero-note{
    margin-top:25px;
    color:rgba(255,255,255,.36);
    font-size:.58rem;
    letter-spacing:.13em;
}

.ih-hero-core{
    position:relative;
    z-index:4;
    min-height:650px;
    display:grid;
    place-items:center;
    perspective:1400px;
}

.ih-core{
    width:170px;
    height:170px;
    border-radius:50%;
    display:grid;
    place-items:center;
    align-content:center;
    background:
        radial-gradient(circle at 35% 25%,rgba(255,255,255,.13),transparent 28%),
        radial-gradient(circle,rgba(85,221,196,.20),rgba(4,12,15,.94) 62%);
    border:1px solid rgba(225,189,115,.30);
    box-shadow:
        0 0 0 18px rgba(85,221,196,.025),
        0 0 90px rgba(85,221,196,.16),
        inset 0 0 35px rgba(225,189,115,.08);
    animation:ih-float 6s ease-in-out infinite;
}

.ih-core strong{font-size:2.8rem;letter-spacing:-.08em}
.ih-core small{font-size:.48rem;letter-spacing:.20em;color:rgba(255,255,255,.42)}

.ih-orbit{
    position:absolute;
    width:430px;
    height:170px;
    border:1px solid rgba(85,221,196,.22);
    border-radius:50%;
    transform-style:preserve-3d;
}

.ih-orbit-a{transform:rotateX(67deg);animation:ih-orbit 12s linear infinite}
.ih-orbit-b{width:500px;height:200px;transform:rotateY(68deg);border-color:rgba(225,189,115,.17);animation:ih-orbit2 16s linear infinite}
.ih-orbit-c{width:360px;height:140px;transform:rotateX(70deg) rotateY(25deg);border-color:rgba(255,255,255,.10);animation:ih-orbit 20s linear infinite reverse}

.ih-float{
    position:absolute;
    min-width:145px;
    padding:14px 17px;
    border:1px solid rgba(255,255,255,.12);
    border-radius:13px;
    background:rgba(5,10,13,.72);
    backdrop-filter:blur(18px);
    box-shadow:0 20px 55px rgba(0,0,0,.45);
    animation:ih-chip 5s ease-in-out infinite;
}

.ih-float b,
.ih-float span{
    display:block;
}

.ih-float b{
    color:var(--ih-gold2);
    font-size:.58rem;
    letter-spacing:.12em;
}

.ih-float span{
    margin-top:5px;
    color:rgba(255,255,255,.40);
    font-size:.48rem;
    letter-spacing:.08em;
}

.ih-float-formula{right:4%;top:22%}
.ih-float-history{left:3%;bottom:25%;animation-delay:-1.6s}
.ih-float-scenario{right:1%;bottom:28%;animation-delay:-3s}

.ih-market,
.ih-journey,
.ih-platform,
.ih-modules{
    width:var(--ih-width);
    margin:auto;
    padding:125px 0;
}

.ih-section-head{
    max-width:780px;
    margin-bottom:55px;
}

.ih-section-head h2{
    margin:18px 0;
    font-size:clamp(2.8rem,5vw,5.5rem);
    line-height:.94;
    letter-spacing:-.065em;
}

.ih-section-head p{
    max-width:650px;
    color:var(--ih-muted);
    line-height:1.8;
}

.ih-centered{
    max-width:900px;
    margin-left:auto;
    margin-right:auto;
    text-align:center;
}

.ih-centered p{margin-left:auto;margin-right:auto}

.ih-market-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:14px;
}

.ih-market-card{
    min-height:170px;
    padding:28px;
    border:1px solid var(--ih-line);
    border-radius:24px;
    background:
        radial-gradient(circle at 100% 100%,rgba(85,221,196,.10),transparent 40%),
        rgba(255,255,255,.025);
    box-shadow:0 25px 70px rgba(0,0,0,.28);
    transition:.35s ease;
}

.ih-market-card:hover{
    transform:translateY(-8px);
    border-color:rgba(225,189,115,.30);
}

.ih-market-card span,
.ih-market-card small{
    display:block;
    color:rgba(255,255,255,.34);
    font-size:.55rem;
    letter-spacing:.16em;
}

.ih-market-card strong{
    display:block;
    margin:30px 0 10px;
    font-size:1.65rem;
}

.ih-market-card small{font-size:.48rem}

.ih-journey{
    position:relative;
}

.ih-journey-line{
    position:absolute;
    left:8%;
    right:8%;
    top:285px;
    height:1px;
    background:linear-gradient(90deg,transparent,var(--ih-gold),var(--ih-teal),var(--ih-gold),transparent);
    opacity:.45;
}

.ih-journey-grid{
    position:relative;
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:20px;
}

.ih-journey-item{
    position:relative;
    padding:45px 25px;
    border-top:1px solid rgba(255,255,255,.14);
    background:linear-gradient(180deg,rgba(255,255,255,.045),transparent);
}

.ih-journey-item b{
    color:var(--ih-gold);
    font-size:.55rem;
}

.ih-journey-item strong{
    display:block;
    margin:30px 0 10px;
    font-size:1.25rem;
}

.ih-journey-item span{
    color:var(--ih-muted);
    font-size:.75rem;
    line-height:1.5;
}

.ih-formula{
    width:var(--ih-width);
    margin:50px auto 120px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:50px;
    align-items:center;
    padding:80px;
    border:1px solid rgba(225,189,115,.18);
    border-radius:38px;
    background:
        radial-gradient(circle at 85% 30%,rgba(225,189,115,.12),transparent 28%),
        radial-gradient(circle at 20% 80%,rgba(85,221,196,.07),transparent 30%),
        rgba(255,255,255,.025);
    box-shadow:0 40px 120px rgba(0,0,0,.45);
}

.ih-formula-copy h2{
    margin:20px 0;
    font-size:clamp(3rem,5vw,6rem);
    line-height:.9;
    letter-spacing:-.07em;
}

.ih-formula-copy h2 em,
.ih-community-copy h2 em,
.ih-final h2 em{
    display:block;
    color:var(--ih-gold2);
    font-style:normal;
}

.ih-formula-copy p{
    max-width:550px;
    color:var(--ih-muted);
    line-height:1.8;
}

.ih-pills{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin:25px 0;
}

.ih-pills i{
    padding:9px 13px;
    border:1px solid rgba(255,255,255,.10);
    border-radius:999px;
    color:rgba(255,255,255,.50);
    font-size:.52rem;
    font-style:normal;
}

.ih-text-link{
    color:var(--ih-gold2);
    font-size:.62rem;
    font-weight:800;
    letter-spacing:.12em;
}

.ih-formula-visual{
    padding:45px;
    border:1px solid rgba(255,255,255,.11);
    border-radius:28px;
    background:rgba(3,8,11,.72);
    box-shadow:inset 0 0 60px rgba(85,221,196,.035),0 30px 90px rgba(0,0,0,.42);
    transform:perspective(1100px) rotateY(-5deg);
}

.ih-formula-label{
    color:rgba(255,255,255,.35);
    font-size:.52rem;
    letter-spacing:.17em;
}

.ih-equation{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    margin:60px 0;
}

.ih-equation span{
    min-width:62px;
    padding:18px 8px;
    text-align:center;
    border:1px solid rgba(225,189,115,.18);
    border-radius:12px;
    color:var(--ih-gold2);
    font-size:.65rem;
}

.ih-equation b{
    color:rgba(255,255,255,.35);
}

.ih-formula-result{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:8px;
}

.ih-formula-result div{
    padding:17px;
    border-radius:12px;
    background:rgba(255,255,255,.035);
}

.ih-formula-result small,
.ih-formula-result strong{
    display:block;
}

.ih-formula-result small{
    color:rgba(255,255,255,.30);
    font-size:.45rem;
    letter-spacing:.12em;
}

.ih-formula-result strong{
    margin-top:8px;
    font-size:.62rem;
}

.ih-formula-foot{
    display:block;
    margin-top:25px;
    color:rgba(255,255,255,.22);
    font-size:.44rem;
    letter-spacing:.14em;
}

.ih-capability-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px;
}

.ih-capability{
    position:relative;
    min-height:310px;
    padding:35px;
    overflow:hidden;
    border:1px solid var(--ih-line);
    border-radius:28px;
    color:var(--ih-text);
    background:
        radial-gradient(circle at 100% 0,rgba(85,221,196,.09),transparent 40%),
        rgba(255,255,255,.025);
    transition:.4s ease;
}

.ih-capability:nth-child(3n+1){
    min-height:350px;
}

.ih-capability::after{
    content:"";
    position:absolute;
    width:180px;
    height:180px;
    right:-90px;
    bottom:-90px;
    border-radius:50%;
    background:radial-gradient(circle,rgba(225,189,115,.16),transparent 68%);
    transition:.5s ease;
}

.ih-capability:hover{
    transform:translateY(-10px) rotateX(2deg);
    border-color:rgba(225,189,115,.35);
    box-shadow:0 35px 100px rgba(0,0,0,.45);
}

.ih-capability:hover::after{transform:scale(1.5)}

.ih-capability > span{
    color:rgba(255,255,255,.25);
    font-size:.55rem;
}

.ih-capability b{
    display:block;
    margin-top:55px;
    font-size:1.35rem;
}

.ih-capability p{
    max-width:320px;
    color:var(--ih-muted);
    line-height:1.7;
    font-size:.78rem;
}

.ih-capability strong{
    position:absolute;
    bottom:30px;
    color:var(--ih-gold2);
    font-size:.52rem;
    letter-spacing:.11em;
}

.ih-featured{
    border-color:rgba(225,189,115,.28);
    background:
        radial-gradient(circle at 20% 10%,rgba(225,189,115,.13),transparent 38%),
        rgba(255,255,255,.035);
}

.ih-knowledge{
    width:var(--ih-width);
    margin:70px auto;
    min-height:650px;
    display:grid;
    grid-template-columns:1.05fr .95fr;
    gap:80px;
    align-items:center;
}

.ih-knowledge-art{
    position:relative;
    min-height:570px;
    border-radius:40px;
    overflow:hidden;
    background:
        linear-gradient(145deg,rgba(4,8,11,.05),rgba(4,8,11,.65)),
        url("/static/finvillahub/assets/grow-plant.jpg") center/cover;
    border:1px solid rgba(255,255,255,.11);
    box-shadow:0 40px 110px rgba(0,0,0,.5);
}

.ih-knowledge-art::before{
    content:"";
    position:absolute;
    inset:30px;
    border:1px solid rgba(225,189,115,.20);
    border-radius:30px;
}

.ih-image-glow{
    position:absolute;
    inset:0;
    background:radial-gradient(circle at 60% 35%,rgba(225,189,115,.20),transparent 35%);
    mix-blend-mode:screen;
}

.ih-floating-caption{
    position:absolute;
    left:35px;
    bottom:35px;
    padding:13px 17px;
    border:1px solid rgba(255,255,255,.12);
    border-radius:999px;
    background:rgba(2,6,8,.70);
    backdrop-filter:blur(15px);
    font-size:.48rem;
    letter-spacing:.14em;
}

.ih-knowledge-orbit{
    position:absolute;
    width:400px;
    height:150px;
    left:50%;
    top:50%;
    border:1px solid rgba(85,221,196,.25);
    border-radius:50%;
    transform:translate(-50%,-50%) rotateX(67deg);
    animation:ih-orbit 15s linear infinite;
}

.ih-knowledge-copy h2{
    margin:22px 0;
    max-width:650px;
    font-size:clamp(3.5rem,6vw,7rem);
    line-height:.88;
    letter-spacing:-.07em;
}

.ih-knowledge-copy p{
    max-width:560px;
    color:var(--ih-muted);
    line-height:1.9;
}

.ih-modules{
    padding-top:100px;
}

.ih-module-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px;
}

.ih-module{
    overflow:hidden;
    border:1px solid var(--ih-line);
    border-radius:28px;
    background:rgba(255,255,255,.025);
    transition:.4s ease;
}

.ih-module:hover{
    transform:translateY(-8px);
    border-color:rgba(225,189,115,.3);
}

.ih-module-image{
    height:270px;
    background-position:center;
    background-size:cover;
}

.ih-module-learn .ih-module-image{
    background-image:
        linear-gradient(rgba(3,6,8,.08),rgba(3,6,8,.65)),
        url("/static/finvillahub/assets/learn-study.jpg");
}

.ih-module-analyse .ih-module-image{
    background-image:
        linear-gradient(rgba(3,6,8,.08),rgba(3,6,8,.65)),
        url("/static/finvillahub/assets/panel-bg.jpg");
}

.ih-module-practise .ih-module-image{
    background-image:
        linear-gradient(rgba(3,6,8,.08),rgba(3,6,8,.65)),
        url("/static/finvillahub/assets/discipline-target.jpg");
}

.ih-module-body{
    padding:30px;
}

.ih-module-body span{
    color:var(--ih-gold2);
    font-size:.52rem;
    letter-spacing:.14em;
}

.ih-module-body h3{
    margin:15px 0 10px;
    font-size:1.45rem;
}

.ih-module-body p{
    min-height:65px;
    color:var(--ih-muted);
    line-height:1.7;
    font-size:.78rem;
}

.ih-module-body a{
    color:var(--ih-teal);
    font-size:.52rem;
    font-weight:800;
    letter-spacing:.11em;
}

.ih-community{
    width:var(--ih-width);
    margin:80px auto 130px;
    display:grid;
    grid-template-columns:1.05fr .95fr;
    gap:80px;
    align-items:center;
}

.ih-community-art{
    position:relative;
    min-height:580px;
    border-radius:40px;
    overflow:hidden;
    background:
        linear-gradient(90deg,rgba(3,7,9,.08),rgba(3,7,9,.72)),
        url("/static/finvillahub/assets/community.jpg") center/cover;
    border:1px solid rgba(255,255,255,.10);
    box-shadow:0 40px 120px rgba(0,0,0,.5);
}

.ih-community-ring{
    position:absolute;
    width:430px;
    height:180px;
    left:50%;
    top:50%;
    border:1px solid rgba(85,221,196,.25);
    border-radius:50%;
    transform:translate(-50%,-50%) rotateX(65deg);
    animation:ih-orbit 14s linear infinite;
}

.ih-ring-two{
    width:300px;
    height:120px;
    border-color:rgba(225,189,115,.22);
    animation-duration:10s;
    animation-direction:reverse;
}

.ih-community-art > span{
    position:absolute;
    bottom:30px;
    left:30px;
    padding:13px 17px;
    border:1px solid rgba(255,255,255,.12);
    border-radius:999px;
    background:rgba(2,6,8,.72);
    font-size:.48rem;
    letter-spacing:.14em;
}

.ih-community-copy h2{
    margin:20px 0;
    font-size:clamp(3.2rem,5.5vw,6.5rem);
    line-height:.88;
    letter-spacing:-.07em;
}

.ih-community-copy p{
    max-width:520px;
    color:var(--ih-muted);
    line-height:1.8;
}

.ih-final{
    position:relative;
    min-height:720px;
    display:grid;
    place-items:center;
    align-content:center;
    text-align:center;
    padding:120px 24px;
    overflow:hidden;
    border-top:1px solid rgba(255,255,255,.08);
    background:
        radial-gradient(circle at 50% 50%,rgba(85,221,196,.09),transparent 32%),
        radial-gradient(circle at 50% 50%,rgba(225,189,115,.07),transparent 55%);
}

.ih-final-glow{
    position:absolute;
    width:750px;
    height:750px;
    border-radius:50%;
    background:radial-gradient(circle,rgba(85,221,196,.13),rgba(225,189,115,.05) 35%,transparent 70%);
    filter:blur(15px);
    animation:ih-pulse 8s ease-in-out infinite;
}

.ih-final > *:not(.ih-final-glow){
    position:relative;
    z-index:2;
}

.ih-final h2{
    max-width:1100px;
    margin:25px auto;
    font-size:clamp(4rem,8vw,9rem);
    line-height:.84;
    letter-spacing:-.075em;
}

.ih-final p{
    color:var(--ih-muted);
    font-size:1rem;
}

@keyframes ih-float{
    0%,100%{transform:translateY(0)}
    50%{transform:translateY(-18px)}
}

@keyframes ih-chip{
    0%,100%{transform:translate3d(0,0,20px)}
    50%{transform:translate3d(0,-13px,40px)}
}

@keyframes ih-orbit{
    to{transform:rotateX(67deg) rotateZ(360deg)}
}

@keyframes ih-orbit2{
    to{transform:rotateY(68deg) rotateZ(-360deg)}
}

@keyframes ih-pulse{
    0%,100%{transform:scale(.90);opacity:.65}
    50%{transform:scale(1.08);opacity:1}
}

@media(max-width:1100px){
    .ih-hero,
    .ih-formula,
    .ih-knowledge,
    .ih-community{
        grid-template-columns:1fr;
    }

    .ih-hero{
        min-height:auto;
        padding-top:100px;
    }

    .ih-hero-core{min-height:560px}

    .ih-market-grid{grid-template-columns:repeat(2,1fr)}
    .ih-capability-grid,
    .ih-module-grid{grid-template-columns:repeat(2,1fr)}
    .ih-journey-grid{grid-template-columns:repeat(3,1fr)}
    .ih-journey-line{display:none}
}

@media(max-width:700px){

    .fvh-immersive-home{
        --ih-width:min(100% - 28px,1380px);
    }

    .ih-hero{
        padding:70px 20px 40px;
    }

    .ih-hero h1{
        font-size:clamp(3.2rem,16vw,5.4rem);
    }

    .ih-hero-core{
        min-height:420px;
    }

    .ih-core{
        width:130px;
        height:130px;
    }

    .ih-orbit{width:300px}
    .ih-orbit-b{width:340px}

    .ih-float{
        min-width:110px;
        transform:scale(.78);
    }

    .ih-market,
    .ih-journey,
    .ih-platform,
    .ih-modules{
        padding:85px 0;
    }

    .ih-market-grid,
    .ih-capability-grid,
    .ih-module-grid,
    .ih-journey-grid{
        grid-template-columns:1fr;
    }

    .ih-formula{
        padding:35px 22px;
    }

    .ih-formula-visual{
        padding:25px 15px;
        transform:none;
    }

    .ih-equation{
        gap:5px;
        margin:40px 0;
    }

    .ih-equation span{
        min-width:48px;
        padding:13px 5px;
        font-size:.55rem;
    }

    .ih-formula-result{
        grid-template-columns:1fr;
    }

    .ih-knowledge-art,
    .ih-community-art{
        min-height:390px;
    }

    .ih-knowledge-copy h2,
    .ih-community-copy h2{
        font-size:clamp(3.2rem,14vw,5.2rem);
    }

    .ih-final{
        min-height:600px;
    }

    .ih-final h2{
        font-size:clamp(3.4rem,15vw,5.5rem);
    }
}

@media(prefers-reduced-motion:reduce){

    .fvh-immersive-home *,
    .fvh-immersive-home *::before,
    .fvh-immersive-home *::after{
        animation-duration:.001ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.001ms !important;
        scroll-behavior:auto !important;
    }
}


/* P20.12 26H.3 GEOMETRY CORRECTION — CONTROLLED */

.ih-hero{
    min-height:780px;
    padding:72px 6vw 56px;
}

.ih-hero h1{
    font-size:clamp(3.5rem,5.2vw,6.8rem);
    line-height:.9;
    margin:22px 0 20px;
}

.ih-market,
.ih-journey{
    padding:82px 0;
}

.ih-section-head{
    margin-bottom:38px;
}

.ih-section-head h2{
    font-size:clamp(2.4rem,4vw,4.4rem);
    line-height:.96;
    margin:14px 0;
}

.ih-formula{
    margin:36px auto 72px;
    gap:42px;
    padding:58px;
}

.ih-formula-copy h2{
    font-size:clamp(2.7rem,4.2vw,4.8rem);
    line-height:.94;
}

.ih-capability{
    min-height:270px;
    padding:30px;
}

.ih-capability:nth-child(3n+1){
    min-height:300px;
}

.ih-capability b{
    margin-top:38px;
}

.ih-knowledge{
    margin:46px auto;
    min-height:560px;
    gap:56px;
}

.ih-knowledge-art{
    min-height:500px;
}

.ih-knowledge-copy h2{
    font-size:clamp(2.8rem,4.8vw,5.2rem);
    line-height:.92;
}

.ih-community{
    margin:56px auto 80px;
    gap:56px;
}

.ih-community-art{
    min-height:500px;
}

.ih-community-copy h2{
    font-size:clamp(2.8rem,4.5vw,5rem);
    line-height:.92;
}

.ih-final{
    min-height:560px;
    padding:90px 24px;
}

.ih-final h2{
    font-size:clamp(3.4rem,5.8vw,6.4rem);
    line-height:.88;
}

@media(max-width:1100px){
    .ih-hero{
        min-height:720px;
        padding:72px 5vw 48px;
    }

    .ih-hero h1{
        font-size:clamp(3.4rem,6vw,5.8rem);
    }

    .ih-market,
    .ih-journey{
        padding:70px 0;
    }

    .ih-formula{
        padding:48px;
    }

    .ih-knowledge{
        min-height:500px;
        gap:42px;
    }

    .ih-knowledge-art{
        min-height:450px;
    }

    .ih-community{
        margin:48px auto 70px;
        gap:42px;
    }

    .ih-community-art{
        min-height:450px;
    }

    .ih-final{
        min-height:500px;
    }
}

@media(max-width:700px){
    .ih-hero{
        min-height:auto;
        padding:58px 20px 32px;
    }

    .ih-hero h1{
        font-size:clamp(3rem,12vw,4.4rem);
        line-height:.92;
        margin:18px 0 16px;
    }

    .ih-hero-lead{
        line-height:1.6;
    }

    .ih-hero-core{
        min-height:360px;
    }

    .ih-market,
    .ih-journey{
        padding:58px 0;
    }

    .ih-section-head{
        margin-bottom:30px;
    }

    .ih-section-head h2{
        font-size:clamp(2.2rem,10vw,3.5rem);
    }

    .ih-market-card{
        min-height:145px;
        padding:22px;
    }

    .ih-journey-item{
        padding:32px 20px;
    }

    .ih-formula{
        margin:28px auto 48px;
        padding:28px 20px;
        gap:28px;
    }

    .ih-formula-copy h2{
        font-size:clamp(2.4rem,10vw,3.8rem);
    }

    .ih-formula-visual{
        padding:22px 12px;
    }

    .ih-capability{
        min-height:230px;
        padding:25px;
    }

    .ih-capability:nth-child(3n+1){
        min-height:250px;
    }

    .ih-capability b{
        margin-top:30px;
    }

    .ih-knowledge{
        margin:38px auto;
        min-height:auto;
        gap:28px;
    }

    .ih-knowledge-art{
        min-height:360px;
        max-width:100%;
        overflow:hidden;
    }

    .ih-knowledge-orbit{
        width:min(360px,88vw);
        max-width:100%;
    }

    .ih-knowledge-copy{
        padding-top:24px;
    }

    .ih-knowledge-copy h2{
        font-size:clamp(2.5rem,10vw,4.2rem);
    }

    .ih-community{
        margin:42px auto 60px;
        gap:28px;
    }

    .ih-community-art{
        min-height:360px;
    }

    .ih-community-copy h2{
        font-size:clamp(2.5rem,9.5vw,4rem);
    }

    .ih-final{
        min-height:460px;
        padding:72px 20px;
    }

    .ih-final h2{
        font-size:clamp(3rem,12vw,4.6rem);
    }
}

/* End P20.12 26H.3 GEOMETRY CORRECTION */

/* P20.12 26H.5-E2 SIDEBAR-AWARE IMMERSIVE SHELL
   Targeted homepage-only geometry correction.
   Does not alter backend, data, formula, entitlement, or shared shell logic.
*/
.fvh-immersive-home{
    margin-left:194px;
    width:calc(100% - 194px);
    max-width:none;
}

@media (max-width:1150px) and (min-width:851px){
    .fvh-immersive-home{
        margin-left:174px;
        width:calc(100% - 174px);
    }
}

@media (max-width:850px){
    .fvh-immersive-home{
        margin-left:0;
        width:100%;
    }
}


/* ============================================================
   P20.12 26H.5-E8 HOMEPAGE-ONLY MAIN GEOMETRY
   Scope: homepage only via .fv-immersive-main
   ============================================================ */

.fv-app-main.fv-immersive-main{
    margin-left:194px;
    width:calc(100% - 194px);
    max-width:none;
}

@media (max-width:1150px) and (min-width:851px){
    .fv-app-main.fv-immersive-main{
        margin-left:174px;
        width:calc(100% - 174px);
    }
}

@media (max-width:850px){
    .fv-app-main.fv-immersive-main{
        margin-left:0;
        width:100%;
    }
}

/* ============================================================
   END P20.12 26H.5-E8
   ============================================================ */

/* P20.12 26H.5-F5 MODULE VISUAL COMPRESSION */
@media (max-width:1100px) and (min-width:701px){
    .ih-module-image{
        height:220px;
    }

    .ih-module-body{
        padding:26px;
    }
}

@media (max-width:700px){
    .ih-module-image{
        height:190px;
    }

    .ih-module-body{
        padding:24px;
    }

    .ih-module-body p{
        min-height:0;
    }
}


/* ============================================================
   P20.12 — 26H.8 VISUAL RECONCILIATION
   Reference-fidelity layer
   ============================================================ */

.ih-capability{
    isolation:isolate;
    background:
        linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.018)),
        radial-gradient(circle at 100% 0,rgba(85,221,196,.13),transparent 45%);
    box-shadow:
        0 18px 55px rgba(0,0,0,.22),
        inset 0 1px 0 rgba(255,255,255,.055);
}

.ih-capability::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:-2;
    background-size:cover;
    background-position:center;
    opacity:.18;
    transform:scale(1.03);
    transition:.5s ease;
}

.ih-capability::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;
    background:
        linear-gradient(180deg,rgba(7,14,20,.08),rgba(7,14,20,.82) 78%),
        linear-gradient(90deg,rgba(7,14,20,.42),transparent);
    pointer-events:none;
}

.ih-capability:nth-child(1)::before{
    background-image:url("/static/finvillahub/assets/learn-study.jpg");
}

.ih-capability:nth-child(2)::before{
    background-image:url("/static/finvillahub/assets/skill-analysis.jpg");
}

.ih-capability:nth-child(3)::before{
    background-image:url("/static/finvillahub/assets/panel-bg.jpg");
}

.ih-capability:nth-child(4)::before{
    background-image:url("/static/finvillahub/assets/tech-grid.jpg");
}

.ih-capability:nth-child(5)::before{
    background-image:url("/static/finvillahub/assets/tech-grid.jpg");
}

.ih-capability:nth-child(6)::before{
    background-image:url("/static/finvillahub/assets/discipline-target.jpg");
}

.ih-capability:hover::before{
    opacity:.28;
    transform:scale(1.07);
}

.ih-capability strong,
.ih-capability p,
.ih-capability a,
.ih-capability h3{
    position:relative;
    z-index:2;
}

.ih-journey-item{
    overflow:hidden;
    border-radius:20px;
    background:
        linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.018)),
        radial-gradient(circle at 50% 0,rgba(225,189,115,.07),transparent 55%);
    box-shadow:0 14px 42px rgba(0,0,0,.16);
}

.ih-journey-item::before{
    content:"";
    position:absolute;
    left:18px;
    right:18px;
    top:0;
    height:2px;
    background:linear-gradient(
        90deg,
        transparent,
        rgba(225,189,115,.72),
        rgba(85,221,196,.72),
        transparent
    );
    opacity:.72;
}

.ih-journey-item::after{
    content:"";
    position:absolute;
    width:90px;
    height:90px;
    right:-28px;
    bottom:-38px;
    border:1px solid rgba(85,221,196,.12);
    border-radius:50%;
    box-shadow:
        0 0 0 16px rgba(85,221,196,.025),
        0 0 0 32px rgba(85,221,196,.018);
    pointer-events:none;
}

.ih-knowledge,
.ih-community{
    position:relative;
}

.ih-knowledge-art,
.ih-community-art{
    filter:drop-shadow(0 24px 55px rgba(0,0,0,.32));
}

.ih-module{
    box-shadow:
        0 20px 60px rgba(0,0,0,.22),
        inset 0 1px 0 rgba(255,255,255,.05);
}

.ih-module-image{
    position:relative;
    overflow:hidden;
}

.ih-module-image::after{
    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(180deg,transparent 45%,rgba(5,10,15,.62)),
        radial-gradient(circle at 80% 20%,rgba(225,189,115,.13),transparent 35%);
    pointer-events:none;
}

.ih-trust-strip{
    width:var(--ih-width);
    margin:28px auto 12px;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:14px;
    position:relative;
}

.ih-trust-badge{
    min-height:76px;
    display:flex;
    align-items:center;
    gap:14px;
    padding:15px 18px;
    border:1px solid rgba(255,255,255,.10);
    border-radius:18px;
    background:
        linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.018)),
        radial-gradient(circle at 100% 0,rgba(85,221,196,.08),transparent 50%);
    box-shadow:
        0 14px 38px rgba(0,0,0,.18),
        inset 0 1px 0 rgba(255,255,255,.045);
    backdrop-filter:blur(10px);
}

.ih-trust-badge-mark{
    width:38px;
    height:38px;
    flex:0 0 38px;
    display:grid;
    place-items:center;
    border:1px solid rgba(225,189,115,.34);
    border-radius:12px;
    color:#e1bd73;
    background:rgba(225,189,115,.07);
    font-weight:800;
    font-size:15px;
}

.ih-trust-badge strong{
    display:block;
    letter-spacing:.16em;
    font-size:11px;
}

.ih-trust-badge small{
    display:block;
    margin-top:4px;
    color:rgba(255,255,255,.58);
    font-size:10px;
    line-height:1.35;
}

.ih-badge-new .ih-trust-badge-mark{
    color:#55ddc4;
    border-color:rgba(85,221,196,.34);
    background:rgba(85,221,196,.07);
}

.ih-badge-trust .ih-trust-badge-mark{
    color:#8ee7d5;
    border-color:rgba(142,231,213,.30);
    background:rgba(142,231,213,.06);
}

.ih-badge-secure .ih-trust-badge-mark{
    color:#d7e8ff;
    border-color:rgba(215,232,255,.25);
    background:rgba(215,232,255,.05);
}

@media (max-width:1100px) and (min-width:701px){
    .ih-trust-strip{
        grid-template-columns:repeat(2,1fr);
    }
}

@media (max-width:700px){
    .ih-trust-strip{
        width:calc(100% - 32px);
        grid-template-columns:1fr 1fr;
        gap:10px;
        margin-top:20px;
    }

    .ih-trust-badge{
        min-height:70px;
        padding:12px;
        gap:9px;
        border-radius:15px;
    }

    .ih-trust-badge-mark{
        width:32px;
        height:32px;
        flex-basis:32px;
        border-radius:10px;
        font-size:13px;
    }

    .ih-trust-badge strong{
        font-size:9px;
    }

    .ih-trust-badge small{
        font-size:9px;
    }
}

@media (max-width:430px){
    .ih-trust-strip{
        grid-template-columns:1fr;
    }
}

/* ============================================================
   P20.12 — 26H.9-D.3 COMPOSITION DENSITY OVERRIDES
   Reference-fidelity reconciliation layer.
   Preserves existing component structure and artwork.
   ============================================================ */

@media (min-width:1101px){

    .ih-hero{
        min-height:760px;
        padding:72px 5vw 56px;
    }

    .ih-market,
    .ih-journey,
    .ih-platform,
    .ih-modules{
        padding-top:78px;
        padding-bottom:78px;
    }

    .ih-formula{
        margin-top:34px;
        margin-bottom:78px;
        padding:58px;
        gap:38px;
    }

    .ih-knowledge{
        margin-top:48px;
        margin-bottom:48px;
        min-height:520px;
        gap:56px;
    }

    .ih-knowledge-art{
        min-height:460px;
    }

    .ih-community{
        margin-top:54px;
        margin-bottom:82px;
        gap:56px;
    }

    .ih-community-art{
        min-height:470px;
    }

    .ih-final{
        min-height:520px;
        padding:82px 24px;
    }
}

@media (min-width:701px) and (max-width:1100px){

    .ih-hero{
        min-height:700px;
        padding-top:78px;
        padding-bottom:48px;
    }

    .ih-market,
    .ih-journey,
    .ih-platform,
    .ih-modules{
        padding-top:68px;
        padding-bottom:68px;
    }

    .ih-formula{
        margin-top:30px;
        margin-bottom:60px;
        padding:46px;
        gap:32px;
    }

    .ih-knowledge{
        margin-top:40px;
        margin-bottom:40px;
        min-height:500px;
        gap:42px;
    }

    .ih-knowledge-art{
        min-height:430px;
    }

    .ih-community{
        margin-top:44px;
        margin-bottom:64px;
        gap:42px;
    }

    .ih-community-art{
        min-height:430px;
    }

    .ih-final{
        min-height:500px;
        padding:72px 24px;
    }
}

/* ============================================================
   END 26H.9-D.3
   ============================================================ */
/* ============================================================
   P20.12 — 26H.9-F.4-R2 MOBILE OVERFLOW CORRECTION
   Target: <=430px only
   Desktop/tablet composition intentionally untouched.
   ============================================================ */

@media (max-width:430px){

    .fvh-immersive-home{
        width:100%;
        max-width:100%;
        overflow-x:clip;
    }

    .ih-hero{
        width:100%;
        max-width:100%;
        min-width:0;
        padding-left:16px;
        padding-right:16px;
        overflow:hidden;
    }

    .ih-hero-copy{
        width:100%;
        max-width:100%;
        min-width:0;
    }

    .ih-hero h1{
        width:100%;
        max-width:100%;
        min-width:0;
        font-size:clamp(2.45rem,10.5vw,4rem);
        line-height:.94;
        overflow-wrap:normal;
        word-break:normal;
    }

    .ih-hero h1 span{
        display:block;
        max-width:100%;
        min-width:0;
    }

    .ih-hero-lead{
        width:100%;
        max-width:100%;
        min-width:0;
        overflow-wrap:anywhere;
    }

    .ih-hero-core{
        width:100%;
        max-width:100%;
        min-width:0;
        overflow:hidden;
    }

    .ih-orbit{
        max-width:none;
    }

    .ih-float{
        max-width:calc(100vw - 32px);
    }

}

/* ============================================================
   END 26H.9-F.4-R2 MOBILE OVERFLOW CORRECTION
   ============================================================ */

