@import url('../fonts/inter.css');

/* ===== RESET & BASE ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
    font-family:'Inter',system-ui,-apple-system,sans-serif;
    color:#1a1a2e;
    background:#f5f6fa;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
}
a{text-decoration:none;color:inherit}
ul{list-style:none}
img{max-width:100%;display:block}
button,input,select{font:inherit;border:none;outline:none}

/* ===== UTILITIES ===== */
.container{
    max-width:1200px;
    margin:0 auto;
    padding:0 20px;
}
.section{padding:60px 0}
.section__title{
    font-size:1.75rem;
    font-weight:800;
    margin-bottom:32px;
    color:#1a1a2e;
}

/* ===== BUTTONS ===== */
.btn{
    display:inline-flex;align-items:center;justify-content:center;
    font-weight:600;border-radius:8px;cursor:pointer;
    transition:transform .15s,box-shadow .15s,background .2s;
    white-space:nowrap;
}
.btn:hover{transform:translateY(-1px);box-shadow:0 4px 14px rgba(0,0,0,.15)}
.btn:active{transform:translateY(0)}
.btn--primary{background:#1a5276;color:#fff;padding:12px 28px;font-size:.95rem}
.btn--primary:hover{background:#154360}
.btn--accent{background:#e8740c;color:#fff;padding:12px 28px;font-size:.95rem}
.btn--accent:hover{background:#d06500}
.btn--outline{border:2px solid #1a5276;color:#1a5276;padding:8px 20px;font-size:.875rem;background:transparent}
.btn--outline:hover{background:#1a5276;color:#fff}
.btn--sm{padding:8px 20px;font-size:.875rem}
.btn--lg{padding:14px 36px;font-size:1.05rem}
.btn--search{border-radius:0 8px 8px 0;padding:12px 32px}

/* ===== HEADER ===== */
.header{
    position:fixed;top:0;left:0;right:0;z-index:100;
    background:rgba(26,42,58,.92);
    backdrop-filter:blur(12px);
    border-bottom:1px solid rgba(255,255,255,.08);
}
.header__inner{
    display:flex;align-items:center;
    height:64px;gap:24px;
}
.logo{display:flex;align-items:center;gap:10px}
.logo__text{
    font-size:1.15rem;font-weight:800;
    color:#fff;letter-spacing:.5px;
}
.nav{display:flex;gap:8px;margin-left:auto}
.nav__link{
    color:rgba(255,255,255,.8);font-size:.9rem;font-weight:500;
    padding:8px 14px;border-radius:6px;
    transition:color .2s,background .2s;
}
.nav__link:hover,.nav__link--active{color:#fff;background:rgba(255,255,255,.1)}
.header__actions{display:flex;gap:10px;margin-left:16px}
.burger{display:none;flex-direction:column;gap:5px;background:none;cursor:pointer;padding:6px}
.burger span{width:24px;height:2px;background:#fff;border-radius:2px;transition:transform .3s,opacity .3s}

/* ===== HERO ===== */
.hero{
    position:relative;
    padding:120px 0 40px;
    min-height:520px;
    overflow:hidden;
}
.hero__bg{
    position:absolute;inset:0;z-index:-1;
    background:
        linear-gradient(135deg,rgba(26,42,58,.85) 40%,rgba(26,82,118,.6) 100%),
        url('../images/hero-bg.jpg') center/cover no-repeat;
}
.hero__inner{padding-bottom:40px}
.hero__title{
    font-size:2.5rem;font-weight:800;
    color:#fff;line-height:1.25;
    max-width:580px;
    margin-bottom:28px;
    text-shadow:0 2px 12px rgba(0,0,0,.3);
}
.hero__buttons{display:flex;gap:14px;flex-wrap:wrap}

/* ===== SEARCH BAR ===== */
.search-bar{
    display:flex;
    background:#fff;
    border-radius:12px;
    box-shadow:0 8px 30px rgba(0,0,0,.12);
    overflow:hidden;
    margin-top:20px;
    position:relative;
    z-index:10;
}
.search-bar__field{
    flex:1;min-width:0;
    padding:14px 18px;
    border-right:1px solid #e8e8e8;
    display:flex;flex-direction:column;
}
.search-bar__field--wide{flex:1.5}
.search-bar__field label{
    font-size:.7rem;font-weight:600;
    color:#888;text-transform:uppercase;
    letter-spacing:.5px;margin-bottom:4px;
}
.search-bar__field select,
.search-bar__field input{
    background:transparent;
    font-size:.9rem;color:#1a1a2e;
    width:100%;
}
.search-bar__field select{cursor:pointer;-webkit-appearance:none;appearance:none}

/* ===== STATS ===== */
.stats{
    background:linear-gradient(135deg,#1a5276,#154360);
    padding:32px 0;
}
.stats__inner{
    display:flex;justify-content:center;
    gap:60px;flex-wrap:wrap;text-align:center;
}
.stat__number{
    display:block;font-size:2rem;font-weight:800;color:#fff;
}
.stat__number::after{content:'+'}
.stat__number--text::after{content:''}
.stat__label{display:block;font-size:1rem;font-weight:600;color:#e8e8e8}
.stat__sub{display:block;font-size:.78rem;color:rgba(255,255,255,.6);margin-top:2px}

/* ===== CATEGORIES ===== */
.categories__grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:32px;
    align-items:start;
}
.categories__list{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:16px;
}
.cat-card{
    display:flex;flex-direction:column;align-items:center;
    text-align:center;gap:10px;
    padding:24px 12px;
    background:#fff;border-radius:14px;
    box-shadow:0 2px 10px rgba(0,0,0,.06);
    transition:transform .2s,box-shadow .2s;
}
.cat-card:hover{transform:translateY(-4px);box-shadow:0 8px 24px rgba(0,0,0,.1)}
.cat-card__icon{
    width:56px;height:56px;border-radius:12px;
    background:#eaf0f6;
    position:relative;
}
/* Category icon colors */
.cat-card__icon--crane{background:linear-gradient(135deg,#f0c27f,#e8740c)}
.cat-card__icon--concrete{background:linear-gradient(135deg,#bdc3c7,#2c3e50)}
.cat-card__icon--vent{background:linear-gradient(135deg,#abdcff,#0396ff)}
.cat-card__icon--climb{background:linear-gradient(135deg,#f6d365,#fda085)}
.cat-card__icon--hydro{background:linear-gradient(135deg,#89c4e1,#1a78c2)}
.cat-card__icon--demolish{background:linear-gradient(135deg,#ff9a9e,#c0392b)}
.cat-card__icon--road{background:linear-gradient(135deg,#b5b5b5,#555)}
.cat-card__icon--brick{background:linear-gradient(135deg,#e07b54,#9b4a2b)}
.cat-card__icon--clean{background:linear-gradient(135deg,#96fbc4,#007991)}
.cat-card__icon--roof{background:linear-gradient(135deg,#89b4cf,#1a5276)}
.cat-card__icon--paint{background:linear-gradient(135deg,#f6d365,#fda085)}
.cat-card__icon--mount{background:linear-gradient(135deg,#a8e063,#56ab2f)}
.cat-card__icon--floor{background:linear-gradient(135deg,#d4a574,#8b5e3c)}
.cat-card__icon--supply{background:linear-gradient(135deg,#667eea,#764ba2)}
.cat-card__icon--project{background:linear-gradient(135deg,#667eea,#764ba2)}
.cat-card__icon--build{background:linear-gradient(135deg,#f0c27f,#e8740c)}
.cat-card__icon--labor{background:linear-gradient(135deg,#ffeaa7,#fdcb6e)}
.cat-card__icon--weld{background:linear-gradient(135deg,#ff7675,#d63031)}
.cat-card__icon--security{background:linear-gradient(135deg,#74b9ff,#0984e3)}
.cat-card__icon--plumb{background:linear-gradient(135deg,#96fbc4,#007991)}
.cat-card__icon--glass{background:linear-gradient(135deg,#a0d2eb,#1f78b4)}
.cat-card__icon--wood{background:linear-gradient(135deg,#d4a574,#8b5e3c)}
.cat-card__icon--struct{background:linear-gradient(135deg,#bdc3c7,#2c3e50)}
.cat-card__icon--pipe{background:linear-gradient(135deg,#81ecec,#00b894)}
.cat-card__icon--insulate{background:linear-gradient(135deg,#fdcb6e,#e17055)}

/* Icon symbols via pseudo-elements */
.cat-card__icon--crane::after,.cat-card__icon--concrete::after,
.cat-card__icon--vent::after,.cat-card__icon--climb::after,
.cat-card__icon--hydro::after,.cat-card__icon--demolish::after,
.cat-card__icon--road::after,.cat-card__icon--brick::after,
.cat-card__icon--clean::after,.cat-card__icon--roof::after,
.cat-card__icon--paint::after,.cat-card__icon--mount::after,
.cat-card__icon--floor::after,.cat-card__icon--supply::after,
.cat-card__icon--project::after,.cat-card__icon--build::after,
.cat-card__icon--labor::after,.cat-card__icon--weld::after,
.cat-card__icon--security::after,.cat-card__icon--plumb::after,
.cat-card__icon--glass::after,.cat-card__icon--wood::after,
.cat-card__icon--struct::after,.cat-card__icon--pipe::after,
.cat-card__icon--insulate::after{
    content:'';position:absolute;inset:12px;
    background:rgba(255,255,255,.5);
    mask-size:contain;mask-repeat:no-repeat;mask-position:center;
    -webkit-mask-size:contain;-webkit-mask-repeat:no-repeat;-webkit-mask-position:center;
}
/* specific masks (kept as data-uris) */
/* crane — tower crane */
.cat-card__icon--crane::after{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 20h20v2H2v-2zM4 8h2v12H4V8zm14 12h-2V4h2v16zM7 10h10v2H7v-2zm0 4h6v2H7v-2z'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 20h20v2H2v-2zM4 8h2v12H4V8zm14 12h-2V4h2v16zM7 10h10v2H7v-2zm0 4h6v2H7v-2z'/%3E%3C/svg%3E"); }
/* concrete — mixer */
.cat-card__icon--concrete::after{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 3H5C3.9 3 3 3.9 3 5v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 14c-3.31 0-6-2.69-6-6s2.69-6 6-6 6 2.69 6 6-2.69 6-6 6zm0-10c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4z'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 3H5C3.9 3 3 3.9 3 5v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 14c-3.31 0-6-2.69-6-6s2.69-6 6-6 6 2.69 6 6-2.69 6-6 6zm0-10c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4z'/%3E%3C/svg%3E"); }
/* vent — fan/AC */
.cat-card__icon--vent::after{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 8.69V4h-4.69L12 .69 8.69 4H4v4.69L.69 12 4 15.31V20h4.69L12 23.31 15.31 20H20v-4.69L23.31 12 20 8.69zM12 18c-3.31 0-6-2.69-6-6s2.69-6 6-6 6 2.69 6 6-2.69 6-6 6z'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 8.69V4h-4.69L12 .69 8.69 4H4v4.69L.69 12 4 15.31V20h4.69L12 23.31 15.31 20H20v-4.69L23.31 12 20 8.69zM12 18c-3.31 0-6-2.69-6-6s2.69-6 6-6 6 2.69 6 6-2.69 6-6 6z'/%3E%3C/svg%3E"); }
/* climb — person climbing */
.cat-card__icon--climb::after{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='4' r='2'/%3E%3Cpath d='M10.5 7.5l-2.5 9 2 .5.5-2h4l.5 2 2-.5-2.5-9h-4zm.75 5.5.75-3h1l.75 3h-2.5zM8 10.5H6v2h2v3h2v-8H8v3z'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='4' r='2'/%3E%3Cpath d='M10.5 7.5l-2.5 9 2 .5.5-2h4l.5 2 2-.5-2.5-9h-4zm.75 5.5.75-3h1l.75 3h-2.5zM8 10.5H6v2h2v3h2v-8H8v3z'/%3E%3C/svg%3E"); }
/* hydro — water drop shield */
.cat-card__icon--hydro::after{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8 0-4.42 3.58-8 8-8 4.42 0 8 3.58 8 8 0 4.42-3.58 8-8 8zm-1-13h2v6h-2zm0 8h2v2h-2z'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8 0-4.42 3.58-8 8-8 4.42 0 8 3.58 8 8 0 4.42-3.58 8-8 8zm-1-13h2v6h-2zm0 8h2v2h-2z'/%3E%3C/svg%3E"); }
/* demolish — hammer breaking */
.cat-card__icon--demolish::after{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M22.7 19l-9.1-9.1c.9-2.3.4-5-1.5-6.9-2-2-5-2.4-7.4-1.3L9 6 6 9 1.6 4.7C.4 7.1.9 10.1 2.9 12.1c1.9 1.9 4.6 2.4 6.9 1.5l9.1 9.1c.4.4 1 .4 1.4 0l2.3-2.3c.5-.4.5-1.1.1-1.4z'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M22.7 19l-9.1-9.1c.9-2.3.4-5-1.5-6.9-2-2-5-2.4-7.4-1.3L9 6 6 9 1.6 4.7C.4 7.1.9 10.1 2.9 12.1c1.9 1.9 4.6 2.4 6.9 1.5l9.1 9.1c.4.4 1 .4 1.4 0l2.3-2.3c.5-.4.5-1.1.1-1.4z'/%3E%3C/svg%3E"); }
/* road — road/landscape */
.cat-card__icon--road::after{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M1 19L7.5 10l4.5 6 3.5-4.33L21 19H1zM5 6c0-1.1.9-2 2-2s2 .9 2 2-.9 2-2 2-2-.9-2-2z'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M1 19L7.5 10l4.5 6 3.5-4.33L21 19H1zM5 6c0-1.1.9-2 2-2s2 .9 2 2-.9 2-2 2-2-.9-2-2z'/%3E%3C/svg%3E"); }
/* brick — bricks pattern */
.cat-card__icon--brick::after{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 4h9v4H2V4zm11 0h9v4h-9V4zM2 10h5v4H2v-4zm7 0h8v4H9v-4zm10 0h3v4h-3v-4zM2 16h9v4H2v-4zm11 0h9v4h-9v-4z'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 4h9v4H2V4zm11 0h9v4h-9V4zM2 10h5v4H2v-4zm7 0h8v4H9v-4zm10 0h3v4h-3v-4zM2 16h9v4H2v-4zm11 0h9v4h-9v-4z'/%3E%3C/svg%3E"); }
/* clean — broom/sparkle */
.cat-card__icon--clean::after{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19.36 2.72L20.78 4.14 17.29 7.63C18.27 9.46 18 11.77 16.59 13.29L11.35 18.56C10.16 19.75 8.58 20.41 6.94 20.41 5.3 20.41 3.72 19.75 2.53 18.56 1.34 17.37.68 15.79.68 14.15.68 12.51 1.34 10.93 2.53 9.74L7.77 4.5C9.29 2.99 11.6 2.72 13.43 3.7L16.92.21 19.36 2.72M6 20L22 4 20 2 4 18 6 20Z'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19.36 2.72L20.78 4.14 17.29 7.63C18.27 9.46 18 11.77 16.59 13.29L11.35 18.56C10.16 19.75 8.58 20.41 6.94 20.41 5.3 20.41 3.72 19.75 2.53 18.56 1.34 17.37.68 15.79.68 14.15.68 12.51 1.34 10.93 2.53 9.74L7.77 4.5C9.29 2.99 11.6 2.72 13.43 3.7L16.92.21 19.36 2.72M6 20L22 4 20 2 4 18 6 20Z'/%3E%3C/svg%3E"); }
/* roof — house */
.cat-card__icon--roof::after{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3L2 12h3v8h6v-6h2v6h6v-8h3L12 3z'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3L2 12h3v8h6v-6h2v6h6v-8h3L12 3z'/%3E%3C/svg%3E"); }
/* paint — brush */
.cat-card__icon--paint::after{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 14c-1.66 0-3 1.34-3 3 0 1.31-1.16 2-2 2 .92 1.22 2.49 2 4 2 2.21 0 4-1.79 4-4 0-1.66-1.34-3-3-3zm13.71-9.37l-1.34-1.34a1 1 0 00-1.41 0L9 12.25 11.75 15l9.96-9.96a1 1 0 000-1.41z'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 14c-1.66 0-3 1.34-3 3 0 1.31-1.16 2-2 2 .92 1.22 2.49 2 4 2 2.21 0 4-1.79 4-4 0-1.66-1.34-3-3-3zm13.71-9.37l-1.34-1.34a1 1 0 00-1.41 0L9 12.25 11.75 15l9.96-9.96a1 1 0 000-1.41z'/%3E%3C/svg%3E"); }
/* mount — wrench */
.cat-card__icon--mount::after{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M22.7 19l-9.1-9.1c.9-2.3.4-5-1.5-6.9-2-2-5-2.4-7.4-1.3L9 6 6 9 1.6 4.7C.4 7.1.9 10.1 2.9 12.1c1.9 1.9 4.6 2.4 6.9 1.5l9.1 9.1c.4.4 1 .4 1.4 0l2.3-2.3c.5-.4.5-1.1.1-1.4z'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M22.7 19l-9.1-9.1c.9-2.3.4-5-1.5-6.9-2-2-5-2.4-7.4-1.3L9 6 6 9 1.6 4.7C.4 7.1.9 10.1 2.9 12.1c1.9 1.9 4.6 2.4 6.9 1.5l9.1 9.1c.4.4 1 .4 1.4 0l2.3-2.3c.5-.4.5-1.1.1-1.4z'/%3E%3C/svg%3E"); }
/* floor — layers */
.cat-card__icon--floor::after{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 21h18v-2H3v2zm0-4h18v-2H3v2zm0-4h18v-2H3v2zm0-4h18V7H3v2zm0-6v2h18V3H3z'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 21h18v-2H3v2zm0-4h18v-2H3v2zm0-4h18v-2H3v2zm0-4h18V7H3v2zm0-6v2h18V3H3z'/%3E%3C/svg%3E"); }
/* supply — truck */
.cat-card__icon--supply::after{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 8h-3V4H3c-1.1 0-2 .9-2 2v11h2c0 1.66 1.34 3 3 3s3-1.34 3-3h6c0 1.66 1.34 3 3 3s3-1.34 3-3h2v-5l-3-4zM6 18.5c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zm13.5-9l1.96 2.5H17V9.5h2.5zm-1.5 9c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5z'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 8h-3V4H3c-1.1 0-2 .9-2 2v11h2c0 1.66 1.34 3 3 3s3-1.34 3-3h6c0 1.66 1.34 3 3 3s3-1.34 3-3h2v-5l-3-4zM6 18.5c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zm13.5-9l1.96 2.5H17V9.5h2.5zm-1.5 9c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5z'/%3E%3C/svg%3E"); }
/* project — blueprint/ruler */
.cat-card__icon--project::after{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19.14 12.94a7.07 7.07 0 000-1.88l2.03-1.58a.49.49 0 00.12-.61l-1.92-3.32a.49.49 0 00-.59-.22l-2.39.96a7.04 7.04 0 00-1.63-.94l-.36-2.54A.48.48 0 0013.92 2h-3.84a.48.48 0 00-.48.41l-.36 2.54c-.59.24-1.13.57-1.63.94l-2.39-.96a.49.49 0 00-.59.22L2.71 8.87a.48.48 0 00.12.61l2.03 1.58a7.07 7.07 0 000 1.88l-2.03 1.58a.49.49 0 00-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.37 1.04.7 1.63.94l.36 2.54c.05.24.26.41.48.41h3.84c.24 0 .44-.17.48-.41l.36-2.54c.59-.24 1.13-.57 1.63-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32a.49.49 0 00-.12-.61l-2.03-1.58zM12 15.6A3.6 3.6 0 1115.6 12 3.6 3.6 0 0112 15.6z'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19.14 12.94a7.07 7.07 0 000-1.88l2.03-1.58a.49.49 0 00.12-.61l-1.92-3.32a.49.49 0 00-.59-.22l-2.39.96a7.04 7.04 0 00-1.63-.94l-.36-2.54A.48.48 0 0013.92 2h-3.84a.48.48 0 00-.48.41l-.36 2.54c-.59.24-1.13.57-1.63.94l-2.39-.96a.49.49 0 00-.59.22L2.71 8.87a.48.48 0 00.12.61l2.03 1.58a7.07 7.07 0 000 1.88l-2.03 1.58a.49.49 0 00-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.37 1.04.7 1.63.94l.36 2.54c.05.24.26.41.48.41h3.84c.24 0 .44-.17.48-.41l.36-2.54c.59-.24 1.13-.57 1.63-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32a.49.49 0 00-.12-.61l-2.03-1.58zM12 15.6A3.6 3.6 0 1115.6 12 3.6 3.6 0 0112 15.6z'/%3E%3C/svg%3E"); }
/* build — building */
.cat-card__icon--build::after{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17 11V3H7v4H3v14h8v-4h2v4h8V11h-4zm-6 4H9v-2h2v2zm0-4H9V9h2v2zm0-4H9V5h2v2zm4 8h-2v-2h2v2zm0-4h-2V9h2v2zm4 4h-2v-2h2v2zm0-4h-2v-2h2v2z'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17 11V3H7v4H3v14h8v-4h2v4h8V11h-4zm-6 4H9v-2h2v2zm0-4H9V9h2v2zm0-4H9V5h2v2zm4 8h-2v-2h2v2zm0-4h-2V9h2v2zm4 4h-2v-2h2v2zm0-4h-2v-2h2v2z'/%3E%3C/svg%3E"); }
/* labor — person */
.cat-card__icon--labor::after{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z'/%3E%3C/svg%3E"); }
/* weld — flame */
.cat-card__icon--weld::after{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13.5 0.67s.74 2.65.74 4.8c0 2.06-1.35 3.73-3.41 3.73-2.07 0-3.63-1.67-3.63-3.73l.03-.36C5.21 7.51 4 10.62 4 14c0 4.42 3.58 8 8 8s8-3.58 8-8C20 8.61 17.41 3.8 13.5.67zM11.71 19c-1.78 0-3.22-1.4-3.22-3.14 0-1.62 1.05-2.76 2.81-3.12 1.77-.36 3.6-1.21 4.62-2.58.39 1.29.59 2.65.59 4.04 0 2.65-2.15 4.8-4.8 4.8z'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13.5 0.67s.74 2.65.74 4.8c0 2.06-1.35 3.73-3.41 3.73-2.07 0-3.63-1.67-3.63-3.73l.03-.36C5.21 7.51 4 10.62 4 14c0 4.42 3.58 8 8 8s8-3.58 8-8C20 8.61 17.41 3.8 13.5.67zM11.71 19c-1.78 0-3.22-1.4-3.22-3.14 0-1.62 1.05-2.76 2.81-3.12 1.77-.36 3.6-1.21 4.62-2.58.39 1.29.59 2.65.59 4.04 0 2.65-2.15 4.8-4.8 4.8z'/%3E%3C/svg%3E"); }
/* security — shield */
.cat-card__icon--security::after{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm0 10.99h7c-.53 4.12-3.28 7.79-7 8.94V12H5V6.3l7-3.11v8.8z'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm0 10.99h7c-.53 4.12-3.28 7.79-7 8.94V12H5V6.3l7-3.11v8.8z'/%3E%3C/svg%3E"); }
/* plumb — water drop */
.cat-card__icon--plumb::after{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2c-5.33 4.55-8 8.48-8 11.8 0 4.98 3.8 8.2 8 8.2s8-3.22 8-8.2c0-3.32-2.67-7.25-8-11.8z'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2c-5.33 4.55-8 8.48-8 11.8 0 4.98 3.8 8.2 8 8.2s8-3.22 8-8.2c0-3.32-2.67-7.25-8-11.8z'/%3E%3C/svg%3E"); }
/* glass — window */
.cat-card__icon--glass::after{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 3v18h18V3H3zm8 16H5v-6h6v6zm0-8H5V5h6v6zm8 8h-6v-6h6v6zm0-8h-6V5h6v6z'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 3v18h18V3H3zm8 16H5v-6h6v6zm0-8H5V5h6v6zm8 8h-6v-6h6v6zm0-8h-6V5h6v6z'/%3E%3C/svg%3E"); }
/* wood — tree/timber */
.cat-card__icon--wood::after{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17 8C8 10 5.9 16.17 3.82 21H5.71C6.66 19 7.7 17.13 9 16.07V21h2v-3c1-.35 2-.54 3-.6V21h2v-3.07c5.13-.64 9-4.89 9-9.93H23C23 4 20.1 4 17 8z'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17 8C8 10 5.9 16.17 3.82 21H5.71C6.66 19 7.7 17.13 9 16.07V21h2v-3c1-.35 2-.54 3-.6V21h2v-3.07c5.13-.64 9-4.89 9-9.93H23C23 4 20.1 4 17 8z'/%3E%3C/svg%3E"); }
/* struct — construction */
.cat-card__icon--struct::after{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 2H2v20h2V2zm16 0h-2v20h2V2zM13 2h-2v20h2V2zm4 4h-2v2h2V6zm0 4h-2v2h2v-2zm0 4h-2v2h2v-2zM9 6H7v2h2V6zm0 4H7v2h2v-2zm0 4H7v2h2v-2z'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 2H2v20h2V2zm16 0h-2v20h2V2zM13 2h-2v20h2V2zm4 4h-2v2h2V6zm0 4h-2v2h2v-2zm0 4h-2v2h2v-2zM9 6H7v2h2V6zm0 4H7v2h2v-2zm0 4H7v2h2v-2z'/%3E%3C/svg%3E"); }
/* pipe — pipeline */
.cat-card__icon--pipe::after{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 12h4v2H4v6h2v2H2v-2h2v-6H2v-2zm18 0h2v10h-4v-2h2V14h-2v-2h2zm-6 0V8H10v4H8v10h8V12h-2zm-2 8h-2v-6h2v6z'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 12h4v2H4v6h2v2H2v-2h2v-6H2v-2zm18 0h2v10h-4v-2h2V14h-2v-2h2zm-6 0V8H10v4H8v10h8V12h-2zm-2 8h-2v-6h2v6z'/%3E%3C/svg%3E"); }
/* insulate — layers/thermal */
.cat-card__icon--insulate::after{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3L1 9l11 6 9-4.91V17h2V9L12 3zm-9 9.17L12 17l9-4.83-9 4.83-9-4.83z'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3L1 9l11 6 9-4.91V17h2V9L12 3zm-9 9.17L12 17l9-4.83-9 4.83-9-4.83z'/%3E%3C/svg%3E"); }

.cat-card__name{font-size:.85rem;font-weight:600;color:#1a1a2e}

/* ===== CTA BOX (sidebar) ===== */
.cta-box{
    background:linear-gradient(135deg,#1a5276,#154360);
    color:#fff;
    border-radius:16px;
    padding:36px 30px;
    display:flex;flex-direction:column;
    gap:16px;
}
.cta-box__title{font-size:1.35rem;font-weight:700}
.cta-box__list{display:flex;flex-direction:column;gap:10px}
.cta-box__list li{
    display:flex;align-items:center;gap:10px;
    font-size:.95rem;
}
.cta-box__list li::before{
    content:'';width:22px;height:22px;flex-shrink:0;
    background:#3ddc84;border-radius:50%;
    display:flex;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:center;
    background-size:14px;
}
.cta-box .btn{align-self:flex-start;margin-top:8px}

/* ===== CONTRACTOR CARDS ===== */
.contractors__grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px;
}
.con-card{
    background:#fff;border-radius:14px;overflow:hidden;
    box-shadow:0 2px 10px rgba(0,0,0,.06);
    transition:transform .2s,box-shadow .2s;
}
.con-card:hover{transform:translateY(-4px);box-shadow:0 8px 24px rgba(0,0,0,.1)}
.con-card__img{
    height:160px;
    background:linear-gradient(135deg,#eaf0f6,#d4dce4);
    background-size:cover;
    background-position:center;
}
.con-card__img--1{background-image:url('../images/contractor-1.jpg');background-size:cover}
.con-card__img--2{background-image:url('../images/contractor-2.jpg');background-size:cover}
.con-card__img--3{background-image:url('../images/contractor-3.jpg');background-size:cover}
.con-card__img--4{background-image:url('../images/contractor-4.jpg');background-size:cover}

.con-card__body{padding:16px}
.con-card__name{font-size:1rem;font-weight:700;margin-bottom:4px}
.con-card__desc{font-size:.82rem;color:#666;margin-bottom:10px}
.con-card__meta{display:flex;align-items:center;gap:12px;font-size:.85rem}
.con-card__rating{color:#e8740c;font-weight:700}
.con-card__reviews{color:#888}

/* ===== CTA BOTTOM ===== */
.cta-bottom{
    position:relative;
    padding:60px 0;
    overflow:hidden;
    text-align:center;
    color:#fff;
}
.cta-bottom__bg{
    position:absolute;inset:0;z-index:-1;
    background:
        linear-gradient(135deg,rgba(26,42,58,.9),rgba(26,82,118,.85)),
        url('../images/cta-bottom-bg.jpg') center/cover no-repeat;
}
.cta-bottom__title{font-size:2rem;font-weight:800;margin-bottom:8px}
.cta-bottom__sub{font-size:1.05rem;color:rgba(255,255,255,.8);margin-bottom:32px}
.cta-bottom__row{
    display:flex;align-items:center;justify-content:center;
    gap:40px;flex-wrap:wrap;
}
.cta-bottom__perk{
    display:flex;align-items:center;gap:12px;
    font-size:.9rem;font-weight:500;
}

/* ===== FOOTER ===== */
.footer{
    background:#0e1b29;
    padding:24px 0;
    color:rgba(255,255,255,.6);
    font-size:.85rem;
}
.footer__inner{
    display:flex;justify-content:space-between;
    align-items:center;flex-wrap:wrap;gap:16px;
}
.footer__links{display:flex;gap:24px}
.footer__links a{transition:color .2s}
.footer__links a:hover{color:#fff}

/* ===== MOBILE MENU ===== */
.header.menu-open .nav{
    display:flex;flex-direction:column;
    position:absolute;top:64px;left:0;right:0;
    background:rgba(26,42,58,.98);
    padding:20px;gap:4px;
}
.header.menu-open .burger span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
.header.menu-open .burger span:nth-child(2){opacity:0}
.header.menu-open .burger span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}

/* ===== RESPONSIVE ===== */
@media(max-width:960px){
    .categories__grid{grid-template-columns:1fr}
    .categories__list{grid-template-columns:repeat(3,1fr)}
    .contractors__grid{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:768px){
    .nav,.header__actions{display:none}
    .burger{display:flex}
    .header.menu-open .nav{display:flex}
    .header.menu-open .header__actions{
        display:flex;
        position:absolute;top:auto;
        padding:0 20px 20px;
    }
    .hero__title{font-size:1.75rem}
    .search-bar{flex-direction:column;border-radius:14px}
    .search-bar__field{border-right:none;border-bottom:1px solid #e8e8e8}
    .btn--search{border-radius:0 0 14px 14px}
    .stats__inner{gap:30px}
    .categories__list{grid-template-columns:repeat(2,1fr)}
    .contractors__grid{grid-template-columns:1fr 1fr}
    .cta-bottom__title{font-size:1.5rem}
    .cta-bottom__row{gap:20px}
}

@media(max-width:480px){
    .categories__list{grid-template-columns:1fr 1fr}
    .contractors__grid{grid-template-columns:1fr}
    .hero__buttons{flex-direction:column}
    .hero__buttons .btn{width:100%;text-align:center}
    .footer__inner{flex-direction:column;text-align:center}
    .footer__links{flex-wrap:wrap;justify-content:center}
}

/* ===== SKELETON LOADING ===== */
@keyframes shimmer{
    0%{background-position:-600px 0}
    100%{background-position:600px 0}
}
.skeleton-line,.skeleton-block,
.cat-card--skeleton,.con-card--skeleton{
    background:linear-gradient(90deg,#e8edf2 25%,#f3f5f7 50%,#e8edf2 75%);
    background-size:1200px 100%;
    animation:shimmer 1.4s infinite linear;
    border-radius:8px;
    pointer-events:none;
}
.cat-card--skeleton{ height:90px; }
.con-card--skeleton{ height:200px; }