/* Base */
:root{
    --primary:#10b7bf;
    --primary-dark:#0a8f96;
    --secondary:#0f172a;
    --text:#243041;
    --muted:#5d6b7c;
    --white:#ffffff;
    --bg:#f5fbfc;
    --line:#d7e5ea;
    --success:#0f9d58;
    --danger:#d93025;
    --shadow:0 18px 50px rgba(16, 33, 52, 0.08);
    --radius:24px;
}

*{box-sizing:border-box}
html{
    scroll-behavior:smooth;
}
body{
    margin:0;
    font-family:Arial, Helvetica, sans-serif;
    color:var(--text);
    background:#fff;
    line-height:1.65;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
    overflow-x:hidden;
}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
.container{width:min(1120px, calc(100% - 32px));margin:0 auto}
.narrow{max-width:780px}
.section{padding:84px 0}
.alt-bg{background:var(--bg)}
.eyebrow{
    display:inline-block;
    background:rgba(16,183,191,.12);
    color:var(--primary-dark);
    padding:8px 14px;
    border-radius:999px;
    font-size:.9rem;
    font-weight:700;
    margin-bottom:18px
}
h1,h2,h3{line-height:1.12;margin:0 0 16px;color:var(--secondary)}
h1{font-size:clamp(2.2rem,4vw,4.4rem)}
h2{font-size:clamp(1.8rem,3vw,3rem)}
h3{font-size:1.25rem}
p{margin:0 0 16px;color:var(--muted)}
.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding:14px 22px;
    border-radius:999px;
    font-weight:700;
    transition:transform .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
    border:2px solid transparent;
}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--primary);color:#fff}
.btn-primary:hover{background:var(--primary-dark)}
.btn-secondary{background:#fff;color:var(--secondary);border-color:var(--line)}
.btn-secondary:hover{border-color:var(--primary);color:var(--primary-dark)}
.section-head{max-width:720px;margin:0 auto 38px;text-align:center}
.section-head.left{text-align:left;margin-left:0}
.card-grid,.project-grid,.contact-cards{display:grid;gap:24px}
.card-grid{grid-template-columns:repeat(4,1fr)}
.small-gap{grid-template-columns:repeat(2,1fr);gap:18px}
.info-card,.service-card,.project-card,.contact-card,.profile-card,.quote-card,.contact-panel,.hero-card{
    background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)
}
.info-card,.service-card,.project-card,.contact-card,.profile-card,.quote-card,.contact-panel{padding:28px}
.service-card{min-height:200px}
.project-card .tag{
    display:inline-block;padding:7px 12px;border-radius:999px;background:#eef8f9;color:var(--primary-dark);font-weight:700;font-size:.85rem;margin-bottom:14px
}
.project-grid{grid-template-columns:repeat(3,1fr)}
.project-card.large{min-height:240px}
.check-list{padding-left:18px;margin:0}
.check-list li{margin-bottom:12px;color:var(--muted)}
.cta-strip{background:linear-gradient(135deg, var(--primary), #17d1db)}
.cta-strip h2,.cta-strip p,.cta-strip a{color:#fff}
.cta-flex{display:flex;align-items:center;justify-content:space-between;gap:20px}
.cta-strip .btn{background:#fff;color:var(--primary-dark)}

/* Header */
.site-header{
    position:sticky;top:0;z-index:50;
    backdrop-filter:saturate(180%) blur(12px);
    background:rgba(255,255,255,.9);
    border-bottom:1px solid rgba(215,229,234,.8)
}
.nav-wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:14px 0}
.brand{display:flex;align-items:center;gap:14px}
.brand-logo{width:62px;height:62px;object-fit:contain;border-radius:18px}
.brand-text strong{display:block;font-size:1.1rem;color:var(--secondary)}
.brand-text small{color:var(--muted)}
.site-nav{display:flex;align-items:center;gap:6px}
.site-nav a{
    padding:12px 16px;border-radius:999px;color:var(--secondary);font-weight:700
}
.site-nav a:hover,.site-nav a.active{background:rgba(16,183,191,.12);color:var(--primary-dark)}
.nav-toggle{
    display:none;background:transparent;border:none;padding:10px;cursor:pointer
}
.nav-toggle span{
    display:block;width:26px;height:2px;background:var(--secondary);margin:5px 0;border-radius:20px;transition:all .3s ease
}

/* Hero */
.hero{
    padding:72px 0 40px;
    background:
      radial-gradient(circle at top left, rgba(16,183,191,.15), transparent 35%),
      radial-gradient(circle at top right, rgba(242,91,36,.12), transparent 35%),
      linear-gradient(180deg, #fff, #f7fcfd);
}
.hero-grid,.split-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:42px;align-items:center}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin:26px 0}
.hero-points{display:flex;flex-wrap:wrap;gap:12px}
.hero-points span{
    padding:10px 14px;background:#fff;border:1px solid var(--line);border-radius:999px;font-weight:700;color:var(--secondary)
}
.hero-card{padding:28px}
.floating-card{animation:floatCard 4s ease-in-out infinite}
@keyframes floatCard{
    0%,100%{transform:translateY(0)}
    50%{transform:translateY(-10px)}
}
.hero-logo{width:min(100%,360px);margin:0 auto 18px}
.stats-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.stats-grid article{background:var(--bg);padding:18px;border-radius:20px}
.stats-grid strong{display:block;font-size:2rem;color:var(--secondary)}
.stats-grid small{color:var(--muted)}

.page-banner{padding:80px 0 30px;background:linear-gradient(180deg, #fff, #f7fbfc)}

.profile-logo{width:120px;margin-bottom:18px}
.quote-card p{font-size:1.1rem;color:var(--secondary)}
.quote-card strong{color:var(--primary-dark)}

/* Contact */
.contact-layout{display:grid;grid-template-columns:1.25fr .75fr;gap:24px}
.contact-sidebar{display:grid;gap:24px}
.form-row{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.field{margin-bottom:18px}
.field label{display:block;font-weight:700;margin-bottom:8px;color:var(--secondary)}
.field input,.field textarea{
    width:100%;padding:14px 16px;border:1px solid #c9dbe1;border-radius:16px;font:inherit;color:var(--secondary);background:#fff;outline:none;
    transition:border-color .2s ease, box-shadow .2s ease
}
.field input::placeholder,.field textarea::placeholder{color:#98a6b5}
.field input:focus,.field textarea:focus{
    border-color:var(--primary);box-shadow:0 0 0 4px rgba(16,183,191,.12)
}
.field.error input,.field.error textarea{border-color:var(--danger);box-shadow:0 0 0 4px rgba(217,48,37,.1)}
.error-text{display:block;min-height:18px;color:var(--danger);margin-top:7px}
.form-status{
    margin-top:18px;padding:14px 16px;border-radius:16px;display:none
}
.form-status.show{display:block}
.form-status.success{background:rgba(15,157,88,.1);color:var(--success)}
.form-status.error{background:rgba(217,48,37,.08);color:var(--danger)}
.map-wrap{border-radius:22px;overflow:hidden;border:1px solid var(--line)}
.map-wrap iframe{width:100%;height:340px;border:0}

/* Footer */
.site-footer{background:#08131f;color:#d9e5f0;padding-top:60px}
.site-footer p,.site-footer a,.site-footer h3{color:inherit}
.footer-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:28px}
.footer-logo{width:100px;margin-bottom:16px}
.footer-bottom{padding:18px 0;border-top:1px solid rgba(255,255,255,.08);margin-top:32px}
.footer-bottom p{margin:0;color:#b5c7d9}

/* Responsive */
@media (max-width: 991px){
    .card-grid{grid-template-columns:repeat(2,1fr)}
    .project-grid{grid-template-columns:repeat(2,1fr)}
    .hero-grid,.split-grid,.contact-layout,.footer-grid{grid-template-columns:1fr}
    .cta-flex{flex-direction:column;align-items:flex-start}
}
@media (max-width: 767px){
    .section{padding:64px 0}
    .brand-logo{width:52px;height:52px}
    .brand-text small{display:none}
    .nav-toggle{display:block}
    .site-nav{
        position:absolute;top:100%;left:0;right:0;background:rgba(255,255,255,.98);
        border-bottom:1px solid var(--line);padding:12px 16px 18px;display:grid;gap:6px;
        max-height:0;overflow:hidden;opacity:0;pointer-events:none;transition:max-height .3s ease, opacity .25s ease
    }
    .site-nav.open{max-height:360px;opacity:1;pointer-events:auto}
    .site-nav a{padding:14px 12px;border-radius:14px}
    .hero{padding-top:42px}
    .hero-actions,.hero-points{flex-direction:column;align-items:stretch}
    .card-grid,.project-grid,.small-gap,.contact-cards,.form-row{grid-template-columns:1fr}
}