:root{
      --brand:#ff4b3a;
      --text:#111827;
      --muted:#6b7280;
      --line:#e5e7eb;
      --cream:#fff1df;
      --mint:#e9f8f1;
      --bg:#ffffff;
    }
    *{ font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
    body{ color:var(--text); background:var(--bg); }
    a{ text-decoration:none; }

    /* Container width like screenshot */
    .page-wrap{ max-width: 1040px; margin: 0 auto; }

    /* Top nav (very thin) */
    .topnav{
      border-bottom:1px solid var(--line);
      background:#fff;
    }
    .logo{
      font-weight:800;
      color:var(--brand);
      letter-spacing:.2px;
      font-size:22px;
      line-height:1;
    }
    .nav-links a{
      font-size:12px;
      color:#111;
      padding:10px 10px;
      display:inline-block;
    }
    .nav-links a:hover{ color:var(--brand); }
    .top-actions a{ font-size:12px; color:#111; }
    .btn-smx{
      font-size:12px;
      padding:6px 12px;
      border-radius:6px;
      line-height:1;
    }
    .btn-brand{ background:var(--brand); border:0; color:#fff; }
    .btn-brand:hover{ background:#ea3f31; color:#fff; }

    /* Hero like screenshot */
    .hero{
      height: 210px;
      position:relative;
      overflow:hidden;
      border-bottom:1px solid var(--line);
      background:
        linear-gradient(90deg, rgba(0,0,0,.70) 0 44%, rgba(0,0,0,0) 66%),
        url("https://images.unsplash.com/photo-1581578731548-c64695cc6952?auto=format&fit=crop&w=1900&q=60");
      background-size:cover;
      background-position:center;
    }
    .hero-box{
      position:absolute;
      left: 36px;
      top: 52px;
      width: 420px;
      color:#fff;
    }
    .hero-box h1{
      font-weight:800;
      font-size:24px;
      line-height:1.1;
      margin:0 0 14px 0;
      text-shadow:0 6px 18px rgba(0,0,0,.4);
    }

    /* search bar like screenshot (rounded + icon circle) */
    .searchbar{
      background:#fff;
      border-radius:20px;
      height:36px;
      display:flex;
      align-items:center;
      padding:0 10px 0 12px;
      gap:10px;
      width: 360px;
      box-shadow:0 6px 20px rgba(0,0,0,.20);
    }
    .searchbar input{
      border:0;
      outline:0;
      font-size:12px;
      width:100%;
    }
    .zip{
      display:flex;
      align-items:center;
      gap:6px;
      border-left:1px solid #eee;
      padding-left:10px;
      font-size:12px;
      color:#6b7280;
      white-space:nowrap;
    }
    .go{
      width:26px; height:26px;
      border-radius:50%;
      display:grid;
      place-items:center;
      background:var(--brand);
      color:#fff;
      flex:0 0 auto;
    }

    /* Category icons row */
    .cats{
      padding: 18px 0 6px;
    }
    .cat-item{
      text-align:center;
      font-size:10px;
      color:#111;
    }
    .cat-ico{
      width:34px; height:34px;
      margin:0 auto 6px;
      display:grid; place-items:center;
      color:var(--brand);
    }
    .cat-ico i{ font-size:20px; }

    /* Section titles like screenshot */
    .section-title{
      font-weight:700;
      font-size:14px;
      margin: 18px 0 10px;
    }

    /* Small project cards grid */
    .proj-grid{
      display:grid;
      grid-template-columns: repeat(4, 1fr);
      gap:10px;
    }
    .proj-card{
      border:1px solid var(--line);
      border-radius:2px;
      padding:10px;
      background:#fff;
      min-height:58px;
    }
    .proj-top{
      display:flex;
      gap:10px;
      align-items:flex-start;
    }
    .proj-ico{
      width:18px; height:18px;
      color:var(--brand);
      display:grid; place-items:center;
      margin-top:2px;
    }
    .proj-name{
      font-size:11px;
      font-weight:600;
      margin:0;
      line-height:1.2;
    }
    .proj-meta{
      font-size:10px;
      color:var(--muted);
      margin-top:4px;
    }
    .proj-meta .star{ color:#f59e0b; }

    .note{
      font-size:9px;
      color:#9ca3af;
      margin:10px 0 0;
    }

    /* Newsletter strip (cream) */
    .newsletter{
      margin-top:16px;
      background:var(--cream);
      border-radius:2px;
      padding:14px 16px;
      border:1px solid #f7e0c2;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:16px;
    }
    .newsletter .left{
      font-size:11px;
      color:#111;
    }
    .newsletter .left b{ font-weight:700; }
    .newsletter .sub{
      font-size:10px;
      color:var(--muted);
      margin-top:4px;
    }
    .newsletter .right{
      display:flex;
      gap:8px;
      align-items:center;
    }
    .n-input{
      height:30px;
      border:1px solid var(--line);
      border-radius:2px;
      padding:0 10px;
      font-size:11px;
      width:160px;
      background:#fff;
    }
    .n-input.zip{ width:120px; }
    .n-btn{
      height:30px;
      border-radius:2px;
      font-size:11px;
      padding:0 14px;
    }

    /* Big image cards (3 columns) */
    .img-row{
      display:grid;
      grid-template-columns: repeat(3, 1fr);
      gap:12px;
    }
    .img-card{
      border:1px solid var(--line);
      border-radius:2px;
      overflow:hidden;
      background:#fff;
    }
    .img-card .topline{
      padding:8px 10px;
      font-size:10px;
      color:#111;
      font-weight:600;
    }
    .img-card img{
      width:100%;
      height:150px;
      object-fit:cover;
      display:block;
    }

    /* Mint section */
    .mint{
      background:var(--mint);
      padding:22px 0;
      margin-top:18px;
    }
    .mint-head{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      margin-bottom:10px;
    }
    .mint-head .title{
      font-weight:800;
      font-size:18px;
    }
    .mint-head .sub{
      font-size:10px;
      color:var(--muted);
      margin-top:2px;
    }
    .mint-head .btn-outline{
      border:1px solid var(--line);
      background:#fff;
      font-size:10px;
      padding:6px 10px;
      border-radius:2px;
      color:#111;
    }

    /* Cost cards (2 rows x 3) */
    .cost-grid{
      display:grid;
      grid-template-columns: repeat(3, 1fr);
      gap:12px;
    }
    .cost-card{
      background:transparent;
    }
    .cost-card img{
      width:100%;
      height:95px;
      object-fit:cover;
      border-radius:0;
      display:block;
    }
    .cost-card .meta{
      font-size:9px;
      color:var(--muted);
      margin-top:6px;
      font-weight:600;
    }
    .cost-card .h{
      font-size:11px;
      font-weight:700;
      margin:4px 0 4px;
      line-height:1.25;
    }
    .cost-card .p{
      font-size:10px;
      color:var(--muted);
      margin:0;
      line-height:1.35;
    }

    /* Popular categories block */
    .popular-cats{
      padding:18px 0 10px;
    }
    .pop-head{
      display:flex;
      align-items:center;
      justify-content:space-between;
      margin-bottom:10px;
    }
    .pop-head .ttl{
      font-weight:800;
      font-size:14px;
    }
    .pop-head .chev{
      color:#111;
      font-size:14px;
    }
    .links-grid{
      display:grid;
      grid-template-columns: repeat(4, 1fr);
      gap:8px 30px;
      padding:8px 0 0;
    }
    .links-grid a{
      font-size:10px;
      color:#0ea5e9;
    }
    .links-grid a:hover{ color:#0284c7; }

    /* Footer like screenshot */
    .footer{
      border-top:1px solid var(--line);
      padding:18px 0 26px;
      margin-top:14px;
    }
    .footer-grid{
      display:grid;
      grid-template-columns: 1.3fr 1fr 1fr 1fr 1fr;
      gap:18px;
      align-items:start;
    }
    .foot-title{
      font-size:10px;
      font-weight:800;
      margin-bottom:6px;
    }
    .foot a{
      display:block;
      font-size:10px;
      color:var(--muted);
      padding:2px 0;
    }
    .foot a:hover{ color:var(--brand); }

    .app-badges img{ height:34px; }

    .bottomline{
      border-top:1px solid var(--line);
      margin-top:16px;
      padding-top:12px;
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:12px;
      font-size:9px;
      color:var(--muted);
    }
    .social i{
      font-size:14px;
      color:#111;
      margin-left:10px;
    }

    /* Responsive */
    @media (max-width: 992px){
      .proj-grid{ grid-template-columns: repeat(2, 1fr); }
      .img-row{ grid-template-columns: 1fr; }
      .cost-grid{ grid-template-columns: 1fr; }
      .links-grid{ grid-template-columns: repeat(2, 1fr); }
      .footer-grid{ grid-template-columns: 1fr 1fr; }
      .hero-box{ left:16px; width: calc(100% - 32px); }
      .searchbar{ width:100%; }
    }