/* =========================================================
   GEOSONARIS-3D
   LANDING PAGE
========================================================= */


/* =========================================================
   ROOT
========================================================= */

:root{

    --navy:#031525;
    --navy2:#06263e;
    --navy3:#092f49;

    --blue:#0579da;
    --cyan:#35c7ff;

    --white:#ffffff;

    --text:#172b3c;
    --gray:#677b8a;

    --light:#f4f8fb;
    --border:#dfe9ef;

}


/* =========================================================
   RESET
========================================================= */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{

    font-family:
        "Noto Sans JP",
        "Yu Gothic",
        "YuGothic",
        "Hiragino Kaku Gothic ProN",
        "Meiryo",
        sans-serif;

    color:var(--text);

    background:#fff;

    line-height:1.85;

    overflow-x:hidden;

}

img{
    display:block;
    max-width:100%;
}

a{
    color:inherit;
    text-decoration:none;
}

button{
    font:inherit;
}

.container{

    width:min(
        1180px,
        calc(100% - 40px)
    );

    margin:0 auto;

}


/* =========================================================
   HEADER
========================================================= */

.header{

    position:fixed;

    top:0;
    left:0;

    z-index:1000;

    width:100%;
    height:72px;

    background:
        rgba(2,16,29,.94);

    backdrop-filter:
        blur(12px);

    -webkit-backdrop-filter:
        blur(12px);

    border-bottom:
        1px solid
        rgba(255,255,255,.10);

    transition:
        background .3s,
        box-shadow .3s;

}

.header.scrolled{

    background:
        rgba(2,16,29,.99);

    box-shadow:
        0 6px 24px
        rgba(0,0,0,.17);

}

.header-inner{

    width:min(
        1400px,
        calc(100% - 50px)
    );

    height:100%;

    margin:auto;

    display:flex;

    align-items:center;

    justify-content:
        space-between;

    gap:30px;

}


/* =========================================================
   LOGO
========================================================= */

.logo{

    color:#fff;

    font-size:24px;

    font-weight:800;

    letter-spacing:1.5px;

}

.logo span{
    color:#36bcff;
}


/* =========================================================
   NAVIGATION
========================================================= */

.nav{

    display:flex;

    align-items:center;

    gap:27px;

}

.nav a{

    color:#fff;

    font-size:14px;

    font-weight:600;

    opacity:.88;

    transition:.25s;

}

.nav a:hover{

    color:#4bcbff;

    opacity:1;

}

.nav-contact{

    padding:
        8px 18px;

    border:
        1px solid
        rgba(69,198,255,.7);

    border-radius:5px;

}


/* =========================================================
   MOBILE MENU
========================================================= */

.menu-button{

    display:none;

    width:44px;
    height:44px;

    background:transparent;

    border:0;

    cursor:pointer;

}

.menu-button span{

    display:block;

    width:25px;
    height:2px;

    margin:5px auto;

    background:#fff;

}


/* =========================================================
   HERO
========================================================= */

.hero{

    width:100%;

    margin-top:72px;

    background:#031525;

}

.hero-image{

    width:100%;

    height:auto;

}


/* =========================================================
   SEO INTRO
========================================================= */

.seo-intro{

    padding:
        74px 20px 68px;

    text-align:center;

    background:#fff;

}

.seo-eyebrow{

    margin-bottom:10px;

    color:#078ed3;

    font-size:12px;

    font-weight:800;

    letter-spacing:2.6px;

}

.seo-intro h1{

    margin-bottom:20px;

    color:#10283c;

    font-size:
        clamp(
            34px,
            4vw,
            52px
        );

    font-weight:800;

    line-height:1.25;

}

.seo-intro h1 span{

    display:block;

    margin-top:10px;

    color:#607787;

    font-size:.45em;

    font-weight:600;

}

.seo-description{

    max-width:890px;

    margin:auto;

    color:#607482;

    font-size:16px;

    line-height:2;

}


/* =========================================================
   QUICK NAVIGATION
========================================================= */

.hero-quicknav{

    padding:20px 0;

    background:#031525;

    border-top:
        1px solid
        rgba(255,255,255,.07);

    border-bottom:
        1px solid
        rgba(255,255,255,.07);

}

.hero-quicknav-inner{

    display:flex;

    justify-content:center;

    gap:14px;

}


/* =========================================================
   BUTTON
========================================================= */

.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-width:210px;

    padding:
        13px 23px;

    border-radius:5px;

    font-size:14px;

    font-weight:700;

    transition:.25s;

}

.btn-primary{

    color:#fff;

    background:
        linear-gradient(
            135deg,
            #0578dc,
            #12abef
        );

    box-shadow:
        0 10px 30px
        rgba(0,135,220,.25);

}

.btn-primary:hover{

    transform:
        translateY(-2px);

    box-shadow:
        0 15px 35px
        rgba(0,135,220,.37);

}

.btn-outline{

    color:#fff;

    border:
        1px solid
        rgba(255,255,255,.52);

    background:
        rgba(255,255,255,.03);

}

.btn-outline:hover{

    color:#06243c;

    background:#fff;

}


/* =========================================================
   COMMON SECTION
========================================================= */

.section{

    padding:
        110px 0;

}

.section-label{

    margin-bottom:14px;

    color:#008fd7;

    font-size:12px;

    font-weight:800;

    letter-spacing:3px;

}

.section-title{

    margin-bottom:24px;

    color:#10283c;

    font-size:
        clamp(
            31px,
            4vw,
            48px
        );

    font-weight:800;

    line-height:1.35;

}

.section-lead{

    max-width:790px;

    color:#647787;

    font-size:16px;

}

.center{
    text-align:center;
}

.center .section-lead{
    margin:auto;
}


/* =========================================================
   ABOUT
========================================================= */

.intro{
    background:#fff;
}

.intro-grid{

    display:grid;

    grid-template-columns:
        .82fr 1.18fr;

    gap:62px;

    align-items:center;

}

.intro-text p + p{
    margin-top:20px;
}


/* =========================================================
   2D MAP
========================================================= */

.intro-image-box{

    overflow:hidden;

    border-radius:15px;

    background:#232323;

    border:
        1px solid #d7e2e9;

    box-shadow:
        0 25px 60px
        rgba(4,37,59,.18);

    transition:.3s;

}

.intro-image-box:hover{

    transform:
        translateY(-4px);

    box-shadow:
        0 32px 70px
        rgba(4,37,59,.23);

}

.intro-map-image{

    width:100%;

    height:auto;

}

.intro-image-caption{

    padding:
        17px 22px 19px;

    display:flex;

    flex-direction:column;

    gap:4px;

    background:
        linear-gradient(
            135deg,
            #071927,
            #0a2b40
        );

    color:#fff;

}

.intro-image-caption strong{
    font-size:15px;
}

.intro-image-caption span{

    color:#aebfca;

    font-size:12px;

}


/* =========================================================
   FEATURES
========================================================= */

.features{

    background:#f3f7fa;

}

.feature-grid{

    display:grid;

    /*
       6-column virtual grid allows
       3 cards on first row and
       2 centered cards on second row.
    */

    grid-template-columns:
        repeat(6,1fr);

    gap:20px;

    margin-top:55px;

}

.feature-card{

    position:relative;

    grid-column:
        span 2;

    min-height:280px;

    padding:
        36px 27px;

    background:#fff;

    border:
        1px solid
        var(--border);

    border-radius:10px;

    transition:
        transform .3s,
        box-shadow .3s,
        border-color .3s;

}

.feature-card:nth-child(4){

    grid-column:
        2 / span 2;

}

.feature-card:nth-child(5){

    grid-column:
        4 / span 2;

}

.feature-card:hover{

    transform:
        translateY(-7px);

    border-color:#c9e5f4;

    box-shadow:
        0 18px 40px
        rgba(1,33,55,.09);

}

.feature-icon{

    width:58px;
    height:58px;

    margin-bottom:23px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:13px;

    background:#e7f6fe;

    color:#028ad0;

    font-size:25px;

}

.feature-card h3{

    margin-bottom:11px;

    color:#173247;

    font-size:18px;

}

.feature-card p{

    color:#71828f;

    font-size:14px;

}


/* =========================================================
   LIVE SCAN FEATURE
========================================================= */

.feature-card:nth-child(5){

    border-color:
        rgba(0,153,219,.28);

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f4fbff
        );

}

.live-icon{

    background:
        linear-gradient(
            135deg,
            #e1f7ff,
            #d5f0ff
        );

    color:#008fd7;

    font-size:31px;

}

.feature-tag{

    display:inline-block;

    margin-top:18px;

    padding:
        4px 10px;

    border-radius:20px;

    background:#e7f7ff;

    color:#0089cf;

    font-size:10px;

    font-weight:800;

    letter-spacing:1.5px;

}


/* =========================================================
   GEOHUNTER SOFTWARE
========================================================= */

.software{

    position:relative;

    padding:
        120px 0;

    overflow:hidden;

    background:
        radial-gradient(
            circle at 75% 40%,
            #0e476a,
            #061d2d 42%,
            #020c15 78%
        );

    color:#fff;

}

.software::before{

    content:"";

    position:absolute;

    inset:0;

    opacity:.13;

    background-image:

        linear-gradient(
            rgba(50,187,255,.2) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(50,187,255,.2) 1px,
            transparent 1px
        );

    background-size:
        55px 55px;

}

.software-grid{

    position:relative;

    z-index:2;

    display:grid;

    grid-template-columns:
        .9fr 1.1fr;

    gap:70px;

    align-items:center;

}

.software .section-title{
    color:#fff;
}

.software .section-lead{
    color:#b8cdd9;
}

.software-badge{

    display:inline-flex;

    margin-bottom:20px;

    padding:
        6px 12px;

    border-radius:20px;

    background:
        rgba(0,183,255,.12);

    border:
        1px solid
        rgba(66,199,255,.35);

    color:#55d0ff;

    font-size:11px;

    font-weight:700;

    letter-spacing:1.3px;

}

.software-list{

    display:grid;

    grid-template-columns:
        1fr 1fr;

    gap:10px;

    margin-top:30px;

}

.soft-item{

    padding:
        11px 14px;

    border-radius:5px;

    border:
        1px solid
        rgba(255,255,255,.10);

    background:
        rgba(255,255,255,.05);

    color:#d6e7f0;

    font-size:13px;

}

.software-note{

    margin-top:25px;

    padding:
        15px 17px;

    border-left:
        3px solid #28bdfb;

    background:
        rgba(255,255,255,.05);

    color:#b8cbd6;

    font-size:12px;

}


/* =========================================================
   SOFTWARE PRODUCT IMAGE
========================================================= */

.software-product{

    display:flex;

    align-items:center;

    justify-content:center;

}

.software-product-image{

    width:100%;

    max-width:630px;

    height:auto;

    filter:
        drop-shadow(
            0 35px 50px
            rgba(0,0,0,.48)
        );

    transition:.35s;

}

.software-product-image:hover{

    transform:
        translateY(-6px)
        scale(1.012);

}


/* =========================================================
   ANALYSIS
========================================================= */

.analysis{
    background:#fff;
}

.analysis-tabs{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:10px;

    margin-top:45px;

    margin-bottom:35px;

}

.analysis-tab{

    padding:
        10px 17px;

    border:
        1px solid #d8e5ed;

    border-radius:30px;

    background:#fff;

    color:#496172;

    cursor:pointer;

    font-size:13px;

    font-weight:700;

    transition:
        background .25s,
        color .25s,
        transform .25s,
        box-shadow .25s;

}

.analysis-tab:hover{

    transform:
        translateY(-1px);

}

.analysis-tab.active{

    color:#fff;

    border-color:#048bd4;

    background:#048bd4;

    box-shadow:
        0 8px 20px
        rgba(0,126,200,.18);

}

.analysis-panel{

    display:none;

    overflow:hidden;

    border-radius:16px;

    background:#071825;

    color:#fff;

    box-shadow:
        0 24px 60px
        rgba(0,30,50,.15);

}

.analysis-panel.active{

    display:grid;

    grid-template-columns:
        .8fr 1.2fr;

}

.analysis-info{

    padding:52px;

}

.analysis-info h3{

    margin-bottom:15px;

    font-size:28px;

}

.analysis-info p{

    color:#b6cbd8;

    font-size:14px;

    line-height:1.9;

}

.analysis-small{

    display:block;

    margin-top:17px;

    color:#74cfff;

    font-size:11px;

    letter-spacing:.3px;

}


/* =========================================================
   ANALYSIS IMAGES
========================================================= */

.analysis-image-demo{

    position:relative;

    min-height:430px;

    padding:24px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:

        linear-gradient(
            rgba(0,190,255,.055) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(0,190,255,.055) 1px,
            transparent 1px
        ),

        #020c13;

    background-size:
        30px 30px;

}

.analysis-image-demo img{

    width:100%;

    max-width:720px;

    max-height:500px;

    object-fit:contain;

    border-radius:7px;

    box-shadow:
        0 18px 45px
        rgba(0,0,0,.45);

    cursor:zoom-in;

    transition:
        transform .3s ease,
        box-shadow .3s ease;

}

.analysis-image-demo img:hover{

    transform:
        scale(1.012);

    box-shadow:
        0 24px 55px
        rgba(0,0,0,.55);

}


/* =========================================================
   IMAGE MODAL
========================================================= */

.image-modal{

    position:fixed;

    inset:0;

    z-index:5000;

    display:none;

    align-items:center;

    justify-content:center;

    padding:30px;

    background:
        rgba(0,0,0,.88);

    backdrop-filter:
        blur(8px);

}

.image-modal.open{
    display:flex;
}

.image-modal img{

    max-width:95vw;

    max-height:90vh;

    object-fit:contain;

    border-radius:6px;

    box-shadow:
        0 30px 100px
        rgba(0,0,0,.65);

}

.modal-close{

    position:absolute;

    top:20px;

    right:25px;

    width:48px;

    height:48px;

    border:
        1px solid
        rgba(255,255,255,.35);

    border-radius:50%;

    background:
        rgba(0,0,0,.35);

    color:#fff;

    font-size:28px;

    cursor:pointer;

}


/* =========================================================
   WORKFLOW
========================================================= */

.workflow{

    background:#f3f7fa;

}

.steps{

    display:grid;

    grid-template-columns:
        repeat(4,1fr);

    gap:35px;

    margin-top:60px;

}

.step{
    padding:10px;
}

.step-number{

    color:#dceef7;

    font-size:60px;

    font-weight:900;

    line-height:1;

}

.step h3{

    margin:
        8px 0 10px;

    color:#183348;

    font-size:18px;

}

.step p{

    color:#70818e;

    font-size:14px;

}


/* =========================================================
   APPLICATION
========================================================= */

.application{
    background:#fff;
}

.application-grid{

    display:grid;

    grid-template-columns:
        1fr 1fr;

    gap:75px;

    align-items:center;

}

.application-card{

    padding:35px;

    border:
        1px solid #e1eaf0;

    border-radius:12px;

    background:#f8fbfd;

}

.application-list{
    list-style:none;
}

.application-list li{

    position:relative;

    padding:
        16px 0 16px 33px;

    border-bottom:
        1px solid #e5edf2;

    color:#485d6c;

    font-size:14px;

}

.application-list li:last-child{
    border-bottom:none;
}

.application-list li::before{

    content:"✓";

    position:absolute;

    left:0;

    color:#058fd5;

    font-weight:900;

}

.note{

    margin-top:30px;

    padding:
        16px 18px;

    border-left:
        3px solid #0a98dc;

    background:#f1f8fc;

    color:#617584;

    font-size:12px;

}


/* =========================================================
   SEO CONTENT
========================================================= */

.search-info{

    padding:
        90px 0;

    background:#f4f8fb;

}

.search-info-grid{

    display:grid;

    grid-template-columns:
        repeat(3,1fr);

    gap:25px;

    margin-top:45px;

}

.search-info-card{

    padding:30px;

    background:#fff;

    border:
        1px solid #e1eaf0;

    border-radius:10px;

}

.search-info-card h3{

    margin-bottom:12px;

    color:#173247;

    font-size:18px;

}

.search-info-card p{

    color:#6c7d8a;

    font-size:14px;

}


/* =========================================================
   CTA
========================================================= */

.cta{

    padding:
        105px 20px;

    text-align:center;

    background:

        linear-gradient(
            rgba(0,22,39,.91),
            rgba(0,22,39,.95)
        ),

        url("../img/geosonaris/hero.png");

    background-size:cover;

    background-position:center;

    color:#fff;

}

.cta h2{

    margin-bottom:17px;

    font-size:
        clamp(
            30px,
            4vw,
            46px
        );

}

.cta p{

    max-width:720px;

    margin:
        0 auto 35px;

    color:#bfd1dc;

}

.cta-buttons{

    display:flex;

    justify-content:center;

    gap:12px;

}


/* =========================================================
   FOOTER
========================================================= */

.footer{

    padding:
        55px 20px 30px;

    background:#020d15;

    color:#8396a5;

}

.footer-inner{

    width:min(
        1180px,
        calc(100% - 20px)
    );

    margin:auto;

    display:grid;

    grid-template-columns:
        2fr 1fr 1fr;

    gap:50px;

}

.footer-logo{

    margin-bottom:15px;

    color:#fff;

    font-size:23px;

    font-weight:800;

}

.footer-logo span{
    color:#35baff;
}

.footer-desc{
    font-size:13px;
}

.footer h4{

    margin-bottom:15px;

    color:#fff;

    font-size:13px;

}

.footer-links{
    list-style:none;
}

.footer-links li{
    margin-bottom:7px;
}

.footer-links a{
    font-size:13px;
}

.footer-links a:hover{
    color:#42c3ff;
}

.copyright{

    width:min(
        1180px,
        calc(100% - 20px)
    );

    margin:
        40px auto 0;

    padding-top:20px;

    border-top:
        1px solid
        rgba(255,255,255,.08);

    text-align:center;

    font-size:11px;

}


/* =========================================================
   REVEAL ANIMATION
========================================================= */

.reveal{

    opacity:0;

    transform:
        translateY(25px);

    transition:
        opacity .75s ease,
        transform .75s ease;

}

.reveal.visible{

    opacity:1;

    transform:none;

}


/* =========================================================
   TABLET
========================================================= */

@media(max-width:1000px){

    .intro-grid,
    .software-grid{

        grid-template-columns:
            1fr;

    }

    .feature-grid{

        grid-template-columns:
            1fr 1fr;

    }

    .feature-card,
    .feature-card:nth-child(4),
    .feature-card:nth-child(5){

        grid-column:auto;

    }

    .steps{

        grid-template-columns:
            1fr 1fr;

    }

    .search-info-grid{

        grid-template-columns:
            1fr;

    }

}


/* =========================================================
   MOBILE NAVIGATION
========================================================= */

@media(max-width:850px){

    .header-inner{

        width:
            calc(100% - 30px);

    }

    .nav{

        position:absolute;

        top:72px;

        left:0;

        width:100%;

        display:none;

        flex-direction:column;

        gap:0;

        padding:15px;

        background:
            rgba(2,16,29,.99);

    }

    .nav.open{
        display:flex;
    }

    .nav a{

        width:100%;

        padding:
            13px 10px;

        border-bottom:
            1px solid
            rgba(255,255,255,.06);

    }

    .menu-button{
        display:block;
    }

    .application-grid{

        grid-template-columns:
            1fr;

        gap:50px;

    }

    .analysis-panel.active{

        grid-template-columns:
            1fr;

    }

    .analysis-info{

        padding:35px;

    }

    .analysis-image-demo{

        min-height:300px;

    }

    .footer-inner{

        grid-template-columns:
            1fr;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media(max-width:600px){

    .container{

        width:
            calc(100% - 30px);

    }

    .logo{
        font-size:19px;
    }

    .section{

        padding:
            75px 0;

    }

    .seo-intro{

        padding:
            55px 20px;

    }

    .hero-quicknav-inner{

        flex-direction:column;

    }

    .btn{

        width:100%;

    }

    .feature-grid{

        grid-template-columns:
            1fr;

    }

    .feature-card,
    .feature-card:nth-child(4),
    .feature-card:nth-child(5){

        grid-column:auto;

    }

    .steps{

        grid-template-columns:
            1fr;

    }

    .software-list{

        grid-template-columns:
            1fr;

    }

    .analysis-tabs{

        justify-content:
            flex-start;

    }

    .analysis-image-demo{

        padding:12px;

    }

    .cta-buttons{

        flex-direction:column;

        max-width:370px;

        margin:auto;

    }

}