/* ==========================================
   CARD GRID
========================================== */

.card-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
    gap:28px;
    margin-top:34px;
}

/* ==========================================
   STANDARD CARD
========================================== */

.info-card{
    position:relative;
    overflow:hidden;
    min-height:220px;
    padding:36px;
    border-radius:28px;
    background:
        linear-gradient(145deg, rgba(25,25,25,.78), rgba(8,8,8,.94));
    border:1px solid rgba(255,255,255,.07);
    box-shadow:
        0 24px 55px rgba(0,0,0,.32),
        inset 0 0 0 1px rgba(255,255,255,.022);
    backdrop-filter:blur(18px);
    transition:
        transform .35s ease,
        border-color .35s ease,
        box-shadow .35s ease,
        background .35s ease;
}

.info-card::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(135deg, transparent, rgba(255,255,255,.045), transparent);
    opacity:0;
    transition:.35s ease;
    pointer-events:none;
}

.info-card::after{
    content:"";
    position:absolute;
    top:-120px;
    right:-120px;
    width:260px;
    height:260px;
    border-radius:50%;
    background:radial-gradient(circle, rgba(255,106,0,.15), transparent 70%);
    opacity:.7;
    pointer-events:none;
    transition:.35s ease;
}

.info-card:hover{
    transform:translateY(-10px);
    border-color:rgba(255,106,0,.38);
    background:
        linear-gradient(145deg, rgba(30,24,18,.82), rgba(8,8,8,.96));
    box-shadow:
        0 28px 70px rgba(0,0,0,.5),
        0 0 45px rgba(255,106,0,.13);
}

.info-card:hover::before{
    opacity:1;
}

.info-card:hover::after{
    opacity:1;
    transform:scale(1.12);
}

.info-card h3{
    position:relative;
    z-index:2;
    font-size:1.48rem;
    margin-bottom:16px;
    color:var(--color-white);
}

.info-card p{
    position:relative;
    z-index:2;
    color:var(--color-muted);
    line-height:1.8;
}

/* ==========================================
   FEATURE LIST
========================================== */

.feature-list{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));
    gap:24px;
    margin:52px 0;
}

.feature-list div{
    position:relative;
    overflow:hidden;
    padding:30px;
    border-radius:24px;
    background:rgba(255,255,255,.035);
    border:1px solid rgba(255,255,255,.06);
    transition:.35s ease;
}

.feature-list div::before{
    content:"";
    position:absolute;
    inset:auto -80px -90px auto;
    width:190px;
    height:190px;
    border-radius:50%;
    background:radial-gradient(circle, rgba(255,106,0,.16), transparent 70%);
    pointer-events:none;
}

.feature-list div:hover{
    transform:translateY(-8px);
    border-color:rgba(255,106,0,.4);
    background:rgba(255,255,255,.05);
    box-shadow:0 22px 55px rgba(255,106,0,.09);
}

.feature-list h3{
    position:relative;
    z-index:2;
    font-size:1.36rem;
    margin-bottom:15px;
    color:var(--color-white);
}

.feature-list p{
    position:relative;
    z-index:2;
    color:var(--color-muted);
    line-height:1.7;
}

/* ==========================================
   HIGHLIGHT BOX
========================================== */

.highlight-box{
    position:relative;
    overflow:hidden;
    padding:88px 72px;
    border-radius:36px;
    background:
        linear-gradient(145deg, rgba(18,18,18,.82), rgba(6,6,6,.94));
    border:1px solid rgba(255,255,255,.06);
    box-shadow:
        0 38px 90px rgba(0,0,0,.52),
        inset 0 0 0 1px rgba(255,255,255,.025);
    backdrop-filter:blur(20px);
}

.highlight-box::before{
    content:"";
    position:absolute;
    top:-170px;
    right:-170px;
    width:390px;
    height:390px;
    border-radius:50%;
    background:radial-gradient(circle, rgba(255,106,0,.20), transparent 70%);
    filter:blur(5px);
    pointer-events:none;
}

.highlight-box::after{
    content:"";
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:1px;
    background:linear-gradient(90deg, transparent, rgba(255,106,0,.65), transparent);
    opacity:.75;
}

.highlight-box > *{
    position:relative;
    z-index:2;
}

.highlight-box h2{
    font-family:var(--font-heading);
    font-size:clamp(3.1rem, 7vw, 5.7rem);
    line-height:.95;
    margin:20px 0;
    color:var(--color-white);
    text-transform:uppercase;
}

.highlight-box p{
    max-width:760px;
    color:var(--color-muted);
    line-height:1.8;
    margin-bottom:35px;
}

/* ==========================================
   QUOTE
========================================== */

.quote-box{
    position:relative;
    overflow:hidden;
    padding:112px 64px;
    text-align:center;
    border-radius:38px;
    background:
        linear-gradient(145deg, rgba(15,15,15,.88), rgba(5,5,5,.96));
    border:1px solid rgba(255,255,255,.06);
    box-shadow:
        0 38px 90px rgba(0,0,0,.52),
        0 0 60px rgba(255,106,0,.08);
    backdrop-filter:blur(20px);
}

.quote-box::before{
    content:"❝";
    position:absolute;
    top:25px;
    left:45px;
    font-size:9rem;
    color:rgba(255,106,0,.13);
    font-family:serif;
}

.quote-box::after{
    content:"";
    position:absolute;
    inset:auto 8% -220px 8%;
    height:320px;
    background:radial-gradient(circle, rgba(255,106,0,.14), transparent 72%);
    filter:blur(25px);
    pointer-events:none;
}

.quote-box h2{
    position:relative;
    z-index:2;
    max-width:940px;
    margin:auto;
    font-family:var(--font-heading);
    font-size:clamp(2.8rem, 6vw, 5.2rem);
    line-height:1.05;
    color:var(--color-white);
    text-transform:uppercase;
}