:root{
      --bg:#0b1220; --bg-2:#111a2c; --fg:#e9edf5; --muted:#9fb0cc; --accent:#c9eef7; --cta:#f5f9ff; --brand:#dfe6f3;
      --card:#0f182a; --stroke:#263149; --ok:#93e1a8;
    }
    *{
        box-sizing:border-box
    }
    html,body{
        height:100%;
    }
    body{
        margin:0;
        font-family:Manrope,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial,'Noto Sans',sans-serif;background:linear-gradient(180deg,var(--bg),var(--bg-2));
        color:var(--fg);
    }
    a{
        color:inherit
    }
    .container{
        max-width:1750px;
        margin-inline:auto;
        padding:24px
    }
    header{
        position:sticky;
        top:0;
        background:rgba(11,18,32,.7);
        backdrop-filter:blur(8px);
        border-bottom:1px solid var(--stroke);
        z-index:5
    }
    .nav{
        display:flex;
        align-items:center;
        gap:16px;
        justify-content:space-between
    }
    .badge{
        display:inline-flex;
        gap:8px;align-items:center;
        padding:8px 12px;border:1px solid var(--stroke);
        border-radius:999px;
        font-weight:600;
        color:var(--muted)
    }
    .logo{
        display:flex;
        align-items:center;
        gap:12px;
        font-weight:800;
        letter-spacing:.3px
    }
    .logo svg{
        width:44px;
        height:44px
    }
    .logo span{
        font-size:20px
    }
    .cta{
        display:inline-flex;
        align-items:center;
        gap:10px;padding:12px 18px;
        border-radius:14px;
        background:var(--fg);
        color:#0b1220;
        font-weight:800;
        text-decoration:none
    }
    .cta:active{
        transform:translateY(1px)
    }
    .hero{
        padding:56px 0 28px;
        border-bottom:1px solid var(--stroke)
    }
    .hero h1{
        font-size:clamp(28px,6vw,48px);
        line-height:1.05;
        margin:.2em 0 .2em;
        font-weight:800
    }
    .hero p{
        color:var(--muted);
        font-size:clamp(16px,2.2vw,18px);
        max-width:70ch
    }
    .grid{
        display:grid;
        grid-template-columns:repeat(12,1fr);
        gap:18px;margin-top:28px
    }
    table, th, td {
        padding: 3px;
    }
    .card{
        grid-column:span 6;
        background:var(--card);
        border:1px solid var(--stroke);
        border-radius:18px;padding:18px
    }
    @media (max-width:900px){
        .card{grid-column:1/-1}
    }
    h2{
        font-size:24px;
        margin:0 0 12px
    }
    ul{
        margin:0; 
        padding-left:18px
    }
    .services li{
        margin:8px 0
    }
    .pill{
        display:inline-flex; 
        gap:8px; 
        align-items:center; 
        padding:8px 12px;border:1px solid var(--stroke); 
        border-radius:999px;margin:6px 6px 0 0; 
        color:var(--brand)
    }
    .gallery{
        max-width: 100%;
        display:grid;
        grid-template-columns: repeat(3,1fr);
        gap:10px;
    }
    .shot{
        aspect-ratio:4/3;
        border-radius:14px;
        border:1px dashed var(--stroke);
        display:grid;
        place-items:center;
        color:var(--muted)
    }
    .contact{
        display:grid;
        grid-template-columns:repeat(12,1fr);
        gap:18px;
        margin-top:18px
    }
    .contact .card{
        grid-column:span 4
    }
    @media (max-width:880px){
        .contact .card{grid-column:1/-1}
    }
    .kpi{
        font-size:28px;
        font-weight:800;
        color:var(--ok)
    }
    footer{
        border-top:1px solid var(--stroke);
        margin-top:40px
    }
    .tiny{
        font-size:13px;
        color:var(--muted)
    }
    .divider{height:1px;
        background:var(--stroke);
        margin:22px 0
    }
    .btn-row{display:flex;
        gap:12px;
        flex-wrap:wrap;
        margin-top:12px
    }
    .btn{padding:10px 14px;
        border:1px solid var(--stroke);
        border-radius:12px;text-decoration:none;
        color:var(--fg)
    }