:root{
    --bg:#07111e;
    --bg-soft:#0c1830;
    --panel:#101c36;
    --line:rgba(255,255,255,.085);
    --text:#edf3ff;
    --muted:#a9b8d8;
    --accent:#65b1ff;
    --accent-2:#5ff7d6;
    --shadow:0 22px 80px rgba(0,0,0,.32);
    --radius:24px;
    --container:1200px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
    margin:0;
    font-family:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
    color:var(--text);
    background:
      radial-gradient(circle at top left, rgba(101,177,255,.18), transparent 28%),
      radial-gradient(circle at top right, rgba(95,247,214,.14), transparent 24%),
      linear-gradient(180deg, #07111e 0%, #08111f 100%);
    line-height:1.65;
}
a{text-decoration:none;color:inherit}
.container{width:min(var(--container), calc(100% - 32px));margin:0 auto}
.header{
    position:sticky;top:0;z-index:40;
    background:rgba(7,17,30,.72);
    border-bottom:1px solid var(--line);
    backdrop-filter:blur(16px);
}
.nav-wrap{
    display:flex;
    align-items:center;
    justify-content:space-between;
    min-height:64px;
    gap:12px;
}
.brand{display:flex;align-items:center;gap:12px}
.brand-mark{
    width:40px;
    height:40px;
    border-radius:13px;
    display:grid;
    place-items:center;
    font-weight:900;
    color:#06101e;
    background:linear-gradient(135deg,var(--accent),var(--accent-2));
    box-shadow:var(--shadow)
}
.brand strong{display:block}
.brand small{display:block;color:var(--muted)}
.nav{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.nav a{
    padding:8px 12px;
    border-radius:999px;
    color:var(--muted);
    transition:.2s ease;
    font-size:.96rem;
}
.nav a:hover,.nav a.active{background:rgba(255,255,255,.06);color:var(--text)}
.nav-toggle{
    display:none;
    border:1px solid var(--line);
    background:var(--panel);
    color:var(--text);
    width:40px;
    height:40px;
    border-radius:12px;
    font-size:1.05rem
}
.hero{padding:74px 0 46px}
.hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:24px;align-items:center}
.kicker{
    display:inline-flex;align-items:center;gap:10px;
    padding:8px 14px;border-radius:999px;font-size:.92rem;
    color:#d7ebff;background:rgba(101,177,255,.08);border:1px solid rgba(101,177,255,.18);
    margin-bottom:20px;
}
h1,h2,h3,h4{line-height:1.12;margin:0 0 14px}
h1{font-size:clamp(2.4rem,5.2vw,4.9rem);letter-spacing:-.045em}
h2{font-size:clamp(1.8rem,3vw,2.8rem);letter-spacing:-.03em}
h3{font-size:1.24rem}
p{margin:0 0 16px;color:var(--muted)}
p.lead{font-size:1.1rem;max-width:62ch}
.actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px}
.btn{
    display:inline-flex;align-items:center;justify-content:center;padding:14px 20px;border-radius:14px;
    font-weight:800;border:1px solid transparent;transition:.2s ease
}
.btn-primary{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#06101e;box-shadow:var(--shadow)}
.btn-secondary{background:rgba(255,255,255,.04);border-color:var(--line);color:var(--text)}
.btn:hover{transform:translateY(-2px)}
.card,.hero-card,.stat,.contact-card,.item-row{
    background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02));
    border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)
}
.hero-card,.card,.contact-card{padding:26px}
.visual-stack{display:grid;gap:16px}
.visual-box{
    padding:22px;border-radius:20px;background:rgba(255,255,255,.03);border:1px solid var(--line)
}
.visual-box strong{display:block;margin-bottom:8px}
.badge-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.badge{padding:18px;border-radius:18px;background:rgba(255,255,255,.03);border:1px solid var(--line)}
.section{padding:34px 0}
.section-head{display:flex;justify-content:space-between;align-items:end;gap:16px;margin-bottom:22px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.card-icon{
    width:54px;height:54px;border-radius:16px;margin-bottom:16px;display:grid;place-items:center;
    background:linear-gradient(135deg, rgba(101,177,255,.2), rgba(95,247,214,.2));
    border:1px solid rgba(255,255,255,.08);font-size:1.32rem
}
.list{list-style:none;padding:0;margin:16px 0 0}
.list li{position:relative;padding-left:20px;margin-bottom:10px;color:var(--muted)}
.list li::before{content:"•";position:absolute;left:0;color:var(--accent-2);font-weight:900}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.stat{padding:24px}
.stat strong{display:block;font-size:2rem;margin-bottom:6px}
.band{
    display:none;
}
.tag{
    display:inline-flex;padding:6px 10px;border-radius:999px;font-size:.84rem;
    border:1px solid var(--line);background:rgba(255,255,255,.04);color:#dce9ff
}
.page-hero{padding:62px 0 24px}
.page-hero p{max-width:72ch}
.table-like{display:grid;gap:14px}
.item-row{padding:22px;border-radius:20px}
.contact-layout{display:grid;grid-template-columns:.88fr 1.12fr;gap:18px}
.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.form-row{display:flex;flex-direction:column;gap:8px}
.form-row.full{grid-column:1/-1}
input,textarea{
    width:100%;padding:14px 16px;border-radius:14px;border:1px solid var(--line);
    background:rgba(255,255,255,.03);color:var(--text);font:inherit
}
textarea{min-height:180px;resize:vertical}
input:focus,textarea:focus{outline:2px solid rgba(101,177,255,.26);border-color:rgba(101,177,255,.34)}
.alert{padding:14px 16px;border-radius:14px;margin-bottom:18px;border:1px solid var(--line)}
.alert.success{background:rgba(68,255,160,.1);color:#d7fff0}
.alert.error{background:rgba(255,110,110,.1);color:#ffd5d5}
.footer{
    padding:28px 0 14px;
    margin-top:20px;
    border-top:1px solid var(--line);
    line-height:1.3;
}
.footer-grid{
    display:grid;
    grid-template-columns:1.2fr .8fr .8fr;
    gap:8px;
    align-items:start;
}
.footer-brand{
    font-weight:900;
    font-size:1.1rem;
    margin:0 0 4px;
    color:var(--text);
}
.footer h4{
    margin:0 0 4px;
    font-size:1rem;
    line-height:1.2;
    color:var(--text);
}
.footer p{
    margin:2px 0;
    color:var(--muted);
    line-height:1.3;
}
.footer a{
    color:var(--muted);
    display:inline-block;
    margin:2px 0;
    line-height:1.3;
}
.footer-bottom{
    margin-top:8px;
    padding-top:8px;
    border-top:1px solid var(--line);
    color:var(--muted);
    font-size:.9rem;
    line-height:1.3;
}
.footer-bottom{margin-top:18px;padding-top:18px;border-top:1px solid var(--line)}
.note{font-size:.94rem}
.quote{
    padding:22px;border-left:4px solid var(--accent);background:rgba(255,255,255,.03);
    border-radius:18px;
}
@media (max-width: 980px){
    .hero-grid,.grid-3,.grid-2,.stats,.contact-layout,.footer-grid{grid-template-columns:1fr}
}
@media (max-width: 760px){
    .nav-toggle{display:grid;place-items:center}
    .nav{
        position:absolute;top:64px;left:16px;right:16px;display:none;
        flex-direction:column;align-items:stretch;background:rgba(9,19,36,.98);
        border:1px solid var(--line);border-radius:20px;padding:12px
    }
    .nav.open{display:flex}
    .form-grid,.badge-grid{grid-template-columns:1fr}
    .hero{padding-top:56px}
}


/* Footer compact spacing fix */
.footer .footer-grid > div{
    display:flex;
    flex-direction:column;
    gap:0;
}
.footer .footer-grid > div > *{
    margin-top:0;
}
.footer .footer-grid a[href*="wa.me"]{
    display:inline-flex;
    align-items:center;
    gap:8px;
}


/* Header compact spacing fix */
.brand strong{
    font-size:1rem;
    line-height:1.05;
}
.brand small{
    font-size:.82rem;
    line-height:1.1;
}



/* Larger project previews */
.project-showcase{
    display:grid;
    gap:22px;
}
.project-large{
    overflow:hidden;
    padding:0;
}
.project-image-wrap{
    display:block;
    width:100%;
    padding:18px;
    background:rgba(255,255,255,.02);
    border-bottom:1px solid var(--line);
}
.project-image-wrap-dark{
    background:linear-gradient(135deg, rgba(101,177,255,.08), rgba(95,247,214,.06));
}
.project-image{
    display:block;
    width:100%;
    height:auto;
    max-height:260px;
    object-fit:contain;
}
.project-content{
    padding:24px 24px 26px;
}
.project-content h3{
    margin-bottom:10px;
}
.project-content p{
    max-width:72ch;
}
.project-actions{
    display:flex;
    gap:12px;
    margin-top:16px;
    flex-wrap:wrap;
}

@media (max-width: 760px){
    .project-image{
        height:auto;
        max-height:200px;
        object-fit:contain;
    }
    .project-content{
        padding:20px;
    }
}

.project-image{width:100%;height:auto;object-fit:contain;max-height:260px;}


/* richer UI project cards */
.project-image-wrap{
    padding:12px !important;
    background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015)) !important;
}
.project-image{
    width:100% !important;
    height:auto !important;
    max-height:340px !important;
    object-fit:contain !important;
    display:block !important;
}
@media (max-width: 760px){
    .project-image{
        max-height:220px !important;
    }
}


/* project previews - ui style */
.project-image{
    width:100% !important;
    height:auto !important;
    max-height:320px !important;
    object-fit:contain !important;
    display:block !important;
}