:root {
--background: #0d0f14;
--panel: #171a21;
--panel-hover: #1e222c;
--border: #303541;
--text: #f3f4f6;
--muted: #9ba3af;
--accent: #5aa7ff;
}

* {
  box-sizing: border-box;
  }

body {
margin: 0;


min-height: 100vh;

background:
    radial-gradient(
        circle at top,
        #171c27 0,
        var(--background) 500px
    );

color: var(--text);

font-family:
    Arial,
    Helvetica,
    sans-serif;


}

.site-header {
padding:
28px
clamp(20px, 5vw, 70px);


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

background:
    rgba(13, 15, 20, 0.85);


}

.site-title {
font-size: 1.7rem;
font-weight: bold;
}

.site-subtitle {
margin-top: 4px;


color: var(--muted);

font-size: 0.9rem;


}

main {
width: min(
1200px,
calc(100% - 40px)
);


margin: 0 auto;

padding: 55px 0 80px;


}

.intro {
margin-bottom: 30px;
}

.intro h1 {
margin:
0
0
8px;


font-size:
    clamp(
        2rem,
        5vw,
        3rem
    );


}

.intro p {
margin: 0;


color: var(--muted);

font-size: 1.05rem;


}

.app-grid {
display: grid;


grid-template-columns:
    repeat(
        auto-fit,
        minmax(280px, 1fr)
    );

gap: 20px;


}

.app-card {
display: flex;


gap: 20px;

min-height: 190px;

padding: 24px;

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

border-radius: 14px;

background:
    var(--panel);

color:
    var(--text);

text-decoration:
    none;

transition:
    transform 0.15s ease,
    background 0.15s ease,
    border-color 0.15s ease;


}

.app-card:hover {
transform:
translateY(-3px);


background:
    var(--panel-hover);

border-color:
    #596273;


}

.app-icon {
display: flex;


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

flex:
    0 0 72px;

width: 72px;
height: 72px;

border-radius: 12px;

background:
    #252b37;

color:
    var(--accent);

font-size: 1.4rem;
font-weight: bold;


}

.app-info {
display: flex;
flex-direction: column;


min-width: 0;


}

.app-info h2 {
margin:
3px
0
10px;


font-size: 1.35rem;


}

.app-info p {
margin: 0;


color:
    var(--muted);

line-height: 1.5;


}

.app-launch {
margin-top: auto;
padding-top: 18px;


color:
    var(--accent);

font-weight: bold;


}

footer {
padding: 30px;


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

color:
    var(--muted);

text-align: center;
font-size: 0.8rem;

}

@media (max-width: 500px) {


main {
    width:
        calc(100% - 28px);

    padding-top:
        35px;
}

.site-header {
    padding:
        22px
        18px;
}

.app-card {
    flex-direction:
        column;
}

}