/* ========================================================= */
/* GLOBAL                                                     */
/* ========================================================= */

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

body{
    background:#ffffff;
    color:#0f172a;
    overflow-x:hidden;
    font-family:Inter,sans-serif;
}

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

.savalan-section{
    position:relative;
    overflow:hidden;
    padding:140px 0;
    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f8fbff 50%,
            #f4f8fc 100%
        );
}

.savalan-shell{
    position:relative;
    z-index:5;

    width:100%;
    max-width:1380px;

    margin:0 auto;
    padding:0 32px;
}

/* ========================================================= */
/* BACKGROUND SYSTEM                                          */
/* ========================================================= */

.savalan-bg-system{
    position:absolute;
    inset:0;
    pointer-events:none;
    overflow:hidden;
}

.savalan-grid{
    position:absolute;
    inset:0;

    opacity:.45;

    background:
        linear-gradient(rgba(15,23,42,.018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(15,23,42,.018) 1px, transparent 1px);

    background-size:44px 44px;

    mask-image:
        radial-gradient(circle at center,
        black 18%,
        transparent 85%);
}

.grid-soft{
    opacity:.24;
}

.savalan-atmosphere{
    position:absolute;
    border-radius:50%;
    filter:blur(120px);
}

.atmosphere-1{
    width:700px;
    height:700px;
    top:-300px;
    left:-180px;
    background:rgba(255,255,255,.96);
}

.atmosphere-2{
    width:520px;
    height:520px;
    bottom:-180px;
    right:-120px;
    background:rgba(219,234,254,.35);
}

.atmosphere-3{
    width:540px;
    height:540px;
    top:-140px;
    right:-120px;
    background:rgba(255,255,255,.95);
}

.atmosphere-4{
    width:440px;
    height:440px;
    bottom:-180px;
    left:-100px;
    background:rgba(226,232,240,.45);
}

.atmosphere-5{
    width:620px;
    height:620px;
    top:-260px;
    left:20%;
    background:rgba(219,234,254,.32);
}

.atmosphere-6{
    width:700px;
    height:700px;
    top:-260px;
    right:-220px;
    background:rgba(241,245,249,.85);
}

/* ========================================================= */
/* TOPOLOGY                                                   */
/* ========================================================= */

.savalan-topology{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    opacity:.26;
}

.topology-lines line{
    stroke:rgba(148,163,184,.34);
    stroke-width:1;
}

.topology-nodes circle{
    fill:#ffffff;
    stroke:rgba(148,163,184,.45);
    stroke-width:1;
}

.signal-line{
    position:absolute;
    height:1px;
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(148,163,184,.45),
            transparent
        );
}

.signal-line-1{
    width:420px;
    top:28%;
    left:12%;
    transform:rotate(12deg);
}

.signal-line-2{
    width:520px;
    bottom:22%;
    right:10%;
    transform:rotate(-10deg);
}

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

.savalan-section-intro{
    max-width:920px;
    margin:0 auto;
    text-align:center;
}

.left-intro{
    text-align:left;
    margin-left:0;
}

.savalan-mini-label{
    display:inline-flex;
    align-items:center;

    padding:10px 16px;

    border-radius:999px;

    border:1px solid rgba(148,163,184,.14);

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.9),
            rgba(248,250,252,.82)
        );

    color:#475569;

    font-size:.78rem;
    font-weight:700;

    letter-spacing:.12em;
    text-transform:uppercase;

    backdrop-filter:blur(12px);
}

.savalan-title{
    margin-top:30px;
    line-height:1;
}

.title-soft{
    display:block;

    color:#64748b;

    font-size:clamp(1.5rem,2vw,2.3rem);
    font-weight:500;

    letter-spacing:-0.05em;
}

.title-strong{
    display:block;

    margin-top:10px;

    color:#0f172a;

    font-size:clamp(2.8rem,5vw,3.1rem);
    font-weight:700;

    letter-spacing:-0.08em;
}

.savalan-description{
    margin-top:28px;

    max-width:760px;

    color:#64748b;

    line-height:1.9;
    font-size:1.04rem;
}

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

.savalan-grid-layout{
    display:grid;
    grid-template-columns:repeat(2,1fr);

    gap:28px;

    margin-top:70px;
}

.single-grid{
    grid-template-columns:1fr;
}

/* ========================================================= */
/* CARDS                                                      */
/* ========================================================= */

.savalan-card{
    position:relative;

    padding:38px;

    border-radius:34px;

    overflow:hidden;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.82),
            rgba(248,250,252,.94)
        );

    border:1px solid rgba(148,163,184,.12);

    backdrop-filter:blur(18px);

    box-shadow:
        0 20px 80px rgba(15,23,42,.05),
        inset 0 1px 0 rgba(255,255,255,.9);

    transition:all .4s ease;
}

.savalan-card:hover{
    transform:translateY(-8px);

    box-shadow:
        0 40px 120px rgba(15,23,42,.08),
        inset 0 1px 0 rgba(255,255,255,.95);
}

.large-card{
    transform:translateY(30px);
}

.large-card:hover{
    transform:translateY(20px);
}

.wide-card{
    max-width:880px;
    margin:0 auto;
}

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

.savalan-card-header{
    display:flex;
    align-items:center;
    gap:18px;
}

.savalan-icon-box{
    width:56px;
    height:56px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:18px;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.95),
            rgba(241,245,249,.82)
        );

    border:1px solid rgba(148,163,184,.14);

    box-shadow:
        0 10px 30px rgba(15,23,42,.04);
}

.savalan-icon{
    width:24px;
    height:24px;
    color:#0f172a;
}

.savalan-card h3{
    font-size:1.5rem;
    font-weight:700;
    letter-spacing:-0.04em;
}

.savalan-card p{
    margin-top:24px;

    color:#64748b;

    line-height:1.9;
}

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

.savalan-btn {
    position: relative;
    margin-top: 30px;

    display: inline-flex;
    align-items: center;
    gap: 10px;

    padding: 14px 20px;
    width: fit-content;

    border-radius: 16px;
    text-decoration: none;

    color: #0f172a;
    font-weight: 600;

    background: linear-gradient(
        180deg,
        rgba(255,255,255,0.96),
        rgba(248,250,252,0.90)
    );

    border: 1px solid rgba(148,163,184,0.18);

    /* Tiny, sharp under-shadow only */
    box-shadow:
        0 2px 3px rgba(0,0,0,0.10);

    transition: all 0.25s ease;
}

.savalan-btn:hover {
    transform: translateY(-2px);

    box-shadow:
        0 3px 4px rgba(0,0,0,0.12);
}

/* ========================================================= */
/* API PANEL                                                  */
/* ========================================================= */

.savalan-api-panel{
    display:flex;
    align-items:center;
    justify-content:center;

    gap:38px;

    margin-top:70px;
}

.api-divider{
    width:1px;
    height:60px;
    background:rgba(148,163,184,.18);
}

.api-metric{
    display:flex;
    flex-direction:column;
    align-items:center;
}

.metric-number{
    font-size:2.2rem;
    font-weight:700;
    letter-spacing:-0.06em;
}

.metric-label{
    margin-top:8px;

    color:#64748b;
    font-size:.92rem;
}

/* ========================================================= */
/* INFRASTRUCTURE                                             */
/* ========================================================= */

.infrastructure-shell{
    max-width:1450px;
}

.infrastructure-panel{
    display:grid;
    grid-template-columns:1.2fr .8fr;

    gap:50px;

    align-items:center;
}

.infra-right{
    display:flex;
    flex-direction:column;
    gap:24px;
}

.infra-status-card{
    display:flex;
    align-items:center;
    gap:18px;

    padding:28px;

    border-radius:28px;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.82),
            rgba(248,250,252,.94)
        );

    border:1px solid rgba(148,163,184,.12);
}

.status-dot{
    width:14px;
    height:14px;

    border-radius:50%;

    background:#22c55e;

    box-shadow:
        0 0 18px rgba(34,197,94,.6);
}

.status-title{
    font-weight:700;
}

.status-sub{
    margin-top:6px;
    color:#64748b;
}

.infra-mini-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:18px;
}

.infra-mini-card{
    padding:24px;

    border-radius:24px;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.78),
            rgba(248,250,252,.92)
        );

    border:1px solid rgba(148,163,184,.12);
}

.infra-mini-card span{
    display:block;
    color:#64748b;
}

.infra-mini-card strong{
    display:block;
    margin-top:12px;

    font-size:1.5rem;
}

/* ========================================================= */
/* SIGNAL                                                     */
/* ========================================================= */

.infra-signal-line{
    position:absolute;

    left:-10%;
    top:50%;

    width:120%;
    height:1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(148,163,184,.35),
            transparent
        );

    transform:rotate(-4deg);
}

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

@media(max-width:1000px){

    .savalan-grid-layout{
        grid-template-columns:1fr;
    }

    .infrastructure-panel{
        grid-template-columns:1fr;
    }

    .large-card{
        transform:none;
    }

    .large-card:hover{
        transform:translateY(-8px);
    }

    .savalan-api-panel{
        flex-direction:column;
    }

    .api-divider{
        width:60px;
        height:1px;
    }
}

@media(max-width:768px){

    .savalan-section{
        padding:90px 0;
    }

    .savalan-shell{
        padding:0 20px;
    }

    .title-strong{
        font-size:3rem;
    }

    .savalan-card{
        padding:30px;
    }

    .savalan-description{
        font-size:.98rem;
    }
}