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

.areas-hero{

    padding:180px 0 120px;

    background:
    linear-gradient(
        180deg,
        rgba(106,0,205,.04),
        transparent
    );

}

.hero-grid{

    display:grid;

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

    gap:80px;

    align-items:center;

}

.areas-hero h1{

    max-width:700px;

}

.areas-hero p{

    max-width:600px;

    margin:24px 0 40px;

    font-size:1.1rem;

}

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

.hero-card{

    display:grid;

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

    gap:20px;

}

.hero-card span{

    background:white;

    padding:30px;

    border-radius:24px;

    text-align:center;

    font-weight:600;

    box-shadow:
    0 10px 30px rgba(0,0,0,.05);

    border:
    1px solid rgba(106,0,205,.08);

}

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

.areas-intro{

    padding:120px 0;

}

.intro-content{

    max-width:850px;

    margin:auto;

    text-align:center;

}

.intro-content h2{

    margin:20px 0;

}

.intro-content p{

    font-size:1.1rem;

}

/* ==================================
   BENTO
================================== */

.areas-bento{

    padding:140px 0;

}

.bento-grid{

    margin-top:70px;

    display:grid;

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

    grid-auto-rows:220px;

    gap:24px;

}

.bento-card{

    background:white;

    padding:40px;

    border-radius:28px;

    border:
    1px solid rgba(106,0,205,.08);

    box-shadow:
    0 12px 35px rgba(0,0,0,.04);

    transition:
    box-shadow .35s ease,
    border-color .35s ease;

}

.bento-card:hover{

    box-shadow:
    0 20px 50px rgba(0,0,0,.08);

    border-color:
    rgba(106,0,205,.25);

}

.bento-card.large{

    grid-column:span 2;

    grid-row:span 2;

}

.bento-card.wide{

    grid-column:span 2;

}

.bento-card.full{

    grid-column:1 / -1;

}

.bento-card h3{

    margin-bottom:15px;

}

.bento-card p{

    color:var(--gray);

}

/* ==================================
   METHODOLOGY JOURNEY
================================== */

.methodology{

    padding:140px 0;

    background:var(--bg-soft);

}

.methodology-journey{

    margin-top:90px;

    max-width:900px;

    margin-inline:auto;

    position:relative;

}

.methodology-journey::before{

    content:"";

    position:absolute;

    left:50%;

    top:0;

    width:4px;

    height:100%;

    transform:
    translateX(-50%);

    background:
    linear-gradient(
        to bottom,
        transparent,
        rgba(106,0,205,.18),
        rgba(106,0,205,.18),
        transparent
    );

    border-radius:999px;

    filter:
    drop-shadow(
        0 0 8px rgba(106,0,205,.08)
    );

}

.journey-step{

    position:relative;

    width:50%;

    padding-right:70px;

    margin-bottom:70px;

}

.journey-step.right{

    margin-left:auto;

    padding-left:70px;

    padding-right:0;

}

.step-number{

    position:absolute;

    top:50%;

    right:-22px;

    transform:
    translateY(-50%);

    width:44px;

    height:44px;

    border-radius:50%;

    background:var(--primary);

    color:white;

    display:flex;

    align-items:center;

    justify-content:center;

    font-weight:700;

    z-index:2;

}

.journey-step.right .step-number{

    left:-22px;

}

.step-number::before{

    content:"";

    position:absolute;

    inset:8px;

    border-radius:50%;

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

}

.step-number::after{

    content:"";

    position:absolute;

    inset:-8px;

    border-radius:50%;

    border:
    2px solid rgba(106,0,205,.12);

}

.step-card{

    background:white;

    padding:32px;

    border-radius:24px;

    font-weight:600;

    text-align:center;

    box-shadow:
    0 10px 30px rgba(0,0,0,.05);

    border:
    1px solid rgba(106,0,205,.08);

}

.step-card{

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

}

.journey-step:hover .step-card{

    transform:
    translateY(-4px);

    box-shadow:
    0 20px 50px rgba(0,0,0,.08);

}

.journey-step:hover .step-number{

    transform:
    translateY(-50%)
    scale(1.08);

}

@keyframes pulseNode{

    0%{

        box-shadow:
        0 0 0 8px rgba(106,0,205,.08),
        0 10px 30px rgba(106,0,205,.15);

    }

    50%{

        box-shadow:
        0 0 0 12px rgba(106,0,205,.04),
        0 12px 35px rgba(106,0,205,.18);

    }

    100%{

        box-shadow:
        0 0 0 8px rgba(106,0,205,.08),
        0 10px 30px rgba(106,0,205,.15);

    }

}

@media(max-width:768px){

    .methodology-journey::before{

        left:22px;

    }

    .journey-step,
    .journey-step.right{

        width:100%;

        margin-left:0;

        padding-left:70px;

        padding-right:0;

    }

    .step-number,
    .journey-step.right .step-number{

        left:0;

        right:auto;

    }

}

/* ==================================
   DETAIL SECTIONS
================================== */

.area-detail{

    padding:140px 0;

}

.detail-grid{

    display:grid;

    grid-template-columns:
    1fr 1fr;

    gap:80px;

    align-items:center;

}

.detail-content h2{

    margin:20px 0;

}

.detail-image{

    min-height:420px;

    border-radius:32px;

    background:
    linear-gradient(
        135deg,
        rgba(106,0,205,.08),
        rgba(106,0,205,.03)
    );

    border:
    1px solid rgba(106,0,205,.08);

    position:relative;

    overflow:hidden;

}

.detail-image img{

    position:absolute;

    inset:0;

    width:100%;
    height:100%;

    object-fit:cover;

    display:block;

    border-radius:inherit;

}

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

.areas-cta{

    padding:160px 0;

}

.cta-content{

    max-width:800px;

    margin:auto;

    text-align:center;

}

.cta-content h2{

    margin:20px 0;

}

.cta-content p{

    margin-bottom:40px;

}

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

.reveal{

    opacity:0;

    transform:
    translateY(50px);

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

}

.reveal.visible{

    opacity:1;

    transform:
    translateY(0);

}

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

/* ==================================
   RESPONSIVE
================================== */

@media (max-width: 992px) {

    .areas-hero {
        padding: 140px 0 90px;
    }

    .hero-grid {
        grid-template-columns: 1fr;
        gap: 50px;
        text-align: center;
    }

    .areas-hero h1,
    .areas-hero p {
        margin-left: auto;
        margin-right: auto;
    }

    .hero-card {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .bento-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .methodology-flow {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .detail-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }

}

@media (max-width: 768px) {

    .areas-hero {
        padding: 100px 0 70px;
    }

    .hero-grid {
        gap: 35px;
    }

    .hero-card {
        grid-template-columns: 1fr;
    }

    .hero-card span {
        padding: 25px;
    }

    .bento-grid {
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
        gap: 18px;
    }

    .bento-card,
    .bento-card.large,
    .bento-card.wide,
    .bento-card.full {
        grid-column: auto;
        grid-row: auto;
        padding: 30px;
    }

    .methodology-flow {
        grid-template-columns: 1fr;
    }

    .step::after {
        display: none;
    }

    .area-detail {
        padding: 80px 0;
    }

    .detail-grid {
        gap: 35px;
    }

    .detail-image {
        min-height: 240px;
    }

    .areas-cta {
        padding: 90px 0;
    }

    .cta-content {
        width: 100%;
    }

}

@media (max-width: 480px) {

    .areas-hero {
        padding: 80px 0 60px;
    }

    .hero-card {
        gap: 15px;
    }

    .hero-card span {
        padding: 22px;
    }

    .bento-card,
    .bento-card.large,
    .bento-card.wide,
    .bento-card.full {
        padding: 24px;
    }

    .area-detail {
        padding: 70px 0;
    }

    .detail-image {
        min-height: 210px;
    }

    .areas-cta {
        padding: 80px 0;
    }

}