:root{
    --ink:#14151a; --muted:#5c6068; --soft:#f6f6f4; --line:#e8e8e4;
    --accent:#14151a;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{font-family:'Manrope',sans-serif;color:var(--ink);background:#fff;line-height:1.6;-webkit-font-smoothing:antialiased}
  .wrap{max-width:1180px;margin:0 auto;padding:0 28px}

  /* header */
  .hdr{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
  .hdr-in{display:flex;align-items:center;justify-content:space-between;height:64px}
  .logo{font-family:'Outfit',sans-serif;font-weight:700;font-size:20px;letter-spacing:-.02em}
  .logo span{color:#9a9a94;font-weight:400;font-size:.72em;letter-spacing:0;margin-left:2px}
  .nav{display:flex;gap:26px;align-items:center}
  .nav a{font-size:13px;font-weight:600;color:var(--muted);text-decoration:none;letter-spacing:.04em}
  .nav a:hover{color:var(--ink)}
  .btn{display:inline-flex;align-items:center;gap:8px;background:var(--ink);color:#fff;font-family:'Outfit',sans-serif;font-weight:600;font-size:14px;padding:11px 22px;border-radius:999px;text-decoration:none;transition:transform .15s,opacity .15s}
  .btn:hover{transform:translateY(-1px);opacity:.9}

  /* hero */
  .hero{padding:88px 0 64px}
  .eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:22px}
  .eyebrow::before{content:"";width:34px;height:2px;background:var(--ink)}
  h1{font-family:'Outfit',sans-serif;font-weight:600;font-size:clamp(38px,5.4vw,64px);line-height:1.06;letter-spacing:-.03em;max-width:820px}
  h1 em{font-style:normal;font-weight:300;color:#9a9a94}
  .hero p{margin-top:22px;font-size:17px;color:var(--muted);max-width:560px}
  .hero .btn{margin-top:28px;font-size:15px;padding:14px 28px}
  @media(max-width:640px){
    .logo{font-size:16px}
    .nav a{display:none}
    .nav .btn{display:inline-flex}
    .sec-head{flex-direction:column;align-items:flex-start;gap:6px}
    .hero{padding:60px 0 44px}
  }

  /* work */
  .work{padding:36px 0 72px}
  .sec-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:34px}
  h2{font-family:'Outfit',sans-serif;font-size:clamp(26px,3vw,36px);font-weight:600;letter-spacing:-.02em}
  .sec-head small{color:var(--muted);font-size:13px}
  .grid{display:grid;grid-template-columns:repeat(12,1fr);gap:22px}
  .card{grid-column:span 6;border:1px solid var(--line);border-radius:18px;overflow:hidden;background:#fff;transition:transform .18s,box-shadow .18s;display:flex;flex-direction:column}
  .card:hover{transform:translateY(-3px);box-shadow:0 18px 50px rgba(20,21,26,.08)}
  .card.wide{grid-column:span 12}
  .thumb{position:relative;overflow:hidden;background:var(--soft)}
  .thumb img{width:100%;display:block;aspect-ratio:16/9;object-fit:cover;object-position:top}
  .tag{position:absolute;top:14px;left:14px;background:rgba(255,255,255,.94);border:1px solid var(--line);border-radius:999px;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:6px 13px;color:var(--ink)}
  .body{padding:22px 24px 24px;display:flex;flex-direction:column;gap:8px;flex:1}
  .body h3{font-family:'Outfit',sans-serif;font-size:21px;font-weight:600;letter-spacing:-.01em}
  .body h3 small{font-weight:400;font-size:14px;color:var(--muted);margin-left:10px}
  .body p{font-size:14px;color:var(--muted);flex:1}
  .meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
  .meta span{font-size:11.5px;font-weight:600;color:var(--ink);background:var(--soft);border:1px solid var(--line);border-radius:999px;padding:4px 11px}
  @media(max-width:860px){.card,.card.wide{grid-column:span 12}}

  /* process */
  .process{background:var(--soft);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:72px 0}
  .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;margin-top:40px}
  .step{border-top:2px solid var(--ink);padding-top:18px}
  .step b{font-family:'Outfit',sans-serif;font-size:13px;letter-spacing:.12em;color:var(--muted)}
  .step h4{font-family:'Outfit',sans-serif;font-size:18px;font-weight:600;margin:6px 0 8px}
  .step p{font-size:13.5px;color:var(--muted)}
  @media(max-width:860px){.steps{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:520px){.steps{grid-template-columns:1fr}}

  /* offer */
  .offer{padding:72px 0}
  .prices{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:38px}
  .price{border:1px solid var(--line);border-radius:18px;padding:30px 28px}
  .price.hot{border:2px solid var(--ink)}
  .price b{font-family:'Outfit',sans-serif;font-size:15px;font-weight:700;letter-spacing:.04em}
  .price .amt{font-family:'Outfit',sans-serif;font-size:40px;font-weight:600;letter-spacing:-.03em;margin:10px 0 4px}
  .price .amt small{font-size:16px;font-weight:400;color:var(--muted)}
  .price p{font-size:13.5px;color:var(--muted)}
  @media(max-width:860px){.prices{grid-template-columns:1fr}}

  /* cta */
  .cta{background:var(--ink);color:#fff;padding:76px 0;text-align:center}
  .cta h2{color:#fff;font-size:clamp(28px,3.6vw,44px);max-width:640px;margin:0 auto}
  .cta h2 em{font-style:normal;font-weight:300;color:#9a9a94}
  .cta p{color:#b9bab4;margin:18px auto 30px;max-width:440px;font-size:15px}
  .cta .btn{background:#fff;color:var(--ink)}
  .cta .btn:hover{background:#e8e8e4}
  .cta .alt{margin-top:18px;font-size:13.5px;color:#8f908b}
  .cta .alt b{color:#fff}

  /* footer */
  footer{padding:34px 0;font-size:13px;color:var(--muted)}
  footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}