:root {
    --text: #333;
    --navy: #061c3d;
    --cyan: #00b8d4;
    --green: #00b0bd;
}
body {
    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
    font-family: 'Source Sans Pro', sans-serif; color: var(--text); letter-spacing: 0.01em;
    background: #fff;
}
img { max-width: 100%; height: auto; }
a[href*=mailto],
a[href*=http] { word-break: break-word; cursor: pointer; }
/* =========================================
   HERO
========================================= */
.hero-top { padding: 20px 15px; }
.logo { max-width: 205px; }

/* =========================================
   INTRO
========================================= */
.intro { padding: 70px 20px 95px; }
.hero-title { 
    font-size: clamp(38px, 3vw, 50px); font-weight: 700; line-height: 1; letter-spacing: -0.01em;
    margin-bottom: 25px; 
}
.hero-title .highlight { color: var(--green); }
.intro-text { font-size: 18px; line-height: 1.3; }

/* =========================================
   PORTFOLIO
========================================= */
.portfolio-section { padding: 60px 20px 95px; }
.portfolio-title {
    font-size: clamp(38px, 3vw, 50px); font-weight: 700; line-height: 1; letter-spacing: -0.01em;
    margin-bottom: 25px; 
}
.portfolio-title .blue { color: var(--green); }
/*--*/
.portfolio-card {
    display: flex; flex-direction: column;
    position: relative; background: white; height: 100%; min-height: 455px; padding: 30px 22px 24px;            
    border: 1px solid var(--green); border-radius: 30px; box-shadow: 0 15px 40px rgba(6, 28, 61, 0.10);
}
.portfolio-card h3 {
    font-size: clamp(32px, 2.3vw, 38px); font-weight: 700; letter-spacing: -0.01em;
    margin-bottom: 25px;
}
.portfolio-subtitle {
    font-size: 22px; font-weight: 700; font-style: italic; color: var(--green); line-height: 1; letter-spacing: -0.01em;
    margin-bottom: 22px;
}
.portfolio-description {
    font-size: 16px; line-height: 1.35; 
    margin-bottom: 30px;
}
.portfolio-bottom { margin-top: auto; }

.arrow-button {
    font-size: 28px; color: var(--cyan); text-decoration: none;
    background: #050505; width: 58px; height: 58px;
    border-radius: 50%; transition: all 0.25s ease;
    display: flex; align-items: center; justify-content: center;                        
}
.arrow-button:hover { background: var(--cyan); color: white; transform: translateX(4px); }

/* =========================================
   FOOTER
========================================= */
footer {
    background: var(--navy); padding: 55px 20px 30px;
    font-size: 14px; color: white; text-align: center;
}
.footer-email { font-size: 22px; font-weight: 700; font-style: italic; color: var(--green); letter-spacing: -0.01em; text-decoration: none; line-height: 1; }
.footer-email:hover { color: white; }
.footer-email i { margin-right: 8px; }
/*--*/
.copyright { margin-top: 35px; }
.privacy { margin-top: 7px; }
.privacy a { color: white; }

/* =========================================
   RESPONSIVE
========================================= */
@media (max-width: 991px) {
    .portfolio-card { min-height: 400px; }
}
@media (max-width: 767px) {
    .intro { padding-top: 45px; padding-bottom: 65px; }
    .portfolio-section { padding-top: 25px; padding-bottom: 65px; }
    .portfolio-title { margin-bottom: 35px; }
    .portfolio-card { min-height: 380px; margin-bottom: 20px; }
    footer { padding-top: 40px; }
}

@media (max-width: 480px) {
    .intro-text { font-size: 17px; }
}