:root{
    --bg:#0a0e15;
    --panel:#10151d;
    --panel-2:#0d1219;
    --line:#1c2530;
    --text:#ffffff;
    --muted:#8996a6;
    --accent:#38b6f0;
    --accent-ink:#04121c;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    background:var(--bg);
    color:var(--text);
    font-family:'Inter', sans-serif;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3,.display{
    font-family:'Anton', sans-serif;
    text-transform:uppercase;
    line-height:0.98;
    letter-spacing:0.3px;
    font-weight:400;
  }
  a{color:inherit;}
  img,svg{display:block; max-width:100%;}
  .wrap{max-width:1080px; margin:0 auto; padding:0 28px;}
  a:focus-visible, button:focus-visible{outline:2px solid var(--accent); outline-offset:3px;}

  .mono{
    font-family:'JetBrains Mono', monospace;
    font-size:0.74rem;
    letter-spacing:1.6px;
    text-transform:uppercase;
    color:var(--accent);
    display:flex; align-items:center; gap:12px;
  }
  .mono::before{content:""; width:22px; height:1px; background:var(--accent);}

  /* ---------- header ---------- */
  header{
    position:sticky; top:0; z-index:20;
    background:rgba(10,14,21,0.86);
    backdrop-filter:blur(8px);
    border-bottom:1px solid var(--line);
  }
  .header-inner{
    max-width:1080px; margin:0 auto; padding:20px 28px;
    display:flex; align-items:center; justify-content:space-between;
  }
  .logo{
    font-family:'Anton', sans-serif;
    text-transform:uppercase;
    font-size:1.15rem;
    letter-spacing:0.5px;
  }
  .logo .a{color:var(--accent);}
  .btn-outline{
    font-family:'Anton', sans-serif;
    text-transform:uppercase;
    letter-spacing:0.6px;
    line-height:1;
    font-size:0.82rem;
    color:var(--accent);
    border:1px solid var(--accent);
    background:transparent;
    padding:14px 20px 11px;
    text-decoration:none;
    text-align:center;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    transition:background .2s ease, color .2s ease;
  }
  .btn-outline:hover{background:var(--accent); color:var(--accent-ink);}
  .btn-solid{
    font-family:'Anton', sans-serif;
    text-transform:uppercase;
    letter-spacing:0.6px;
    line-height:1;
    font-size:0.85rem;
    color:var(--accent-ink);
    background:var(--accent);
    border:1px solid var(--accent);
    padding:18px 26px 14px;
    text-decoration:none;
    text-align:center;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    transition:opacity .2s ease;
  }
  .btn-solid:hover{opacity:0.86;}

  /* ---------- hero ---------- */
  .hero{
    position:relative;
    border-bottom:1px solid var(--line);
    padding:110px 0 84px;
    overflow:hidden;
    background:
      radial-gradient(700px 380px at 78% 10%, rgba(56,182,240,0.10), transparent 65%),
      var(--bg);
  }
  .hero::before{
    content:"";
    position:absolute; inset:0;
    background-image:
      linear-gradient(var(--line) 1px, transparent 1px),
      linear-gradient(90deg, var(--line) 1px, transparent 1px);
    background-size:52px 52px;
    opacity:0.28;
    mask-image:linear-gradient(180deg, transparent, black 30%, black 70%, transparent);
  }
  .hero .wrap{position:relative;}
  .hero h1{font-size:clamp(2.6rem, 6.4vw, 4.6rem); max-width:12ch; margin-top:22px;}
  .hero h1 .accent{color:var(--accent);}
  .hero p.lead{
    margin:24px 0 0;
    max-width:52ch;
    color:var(--muted);
    font-size:1.06rem;
  }
  .hero-ctas{margin-top:36px; display:flex; gap:14px; flex-wrap:wrap;}

  /* ---------- section shell ---------- */
  section.block{padding:80px 0; border-bottom:1px solid var(--line);}
  .block-head{max-width:60ch;}
  .block-head h2{font-size:clamp(1.9rem, 3.6vw, 2.6rem); margin-top:16px;}
  .block-head p{color:var(--muted); margin-top:16px; font-size:1rem;}
  .about-head{max-width:64ch; margin:0 auto; text-align:center;}
  .about-head .mono{justify-content:center;}

  /* ---------- services ---------- */
  .service-list{margin-top:48px;}
  .service-row{
    display:grid;
    grid-template-columns:64px 1fr;
    gap:24px;
    padding:34px 0;
    border-top:1px solid var(--line);
  }
  .service-row:last-child{border-bottom:1px solid var(--line);}
  .service-icon{
    width:44px; height:44px;
    border:1px solid var(--line);
    background:var(--panel);
    display:flex; align-items:center; justify-content:center;
    color:var(--accent);
  }
  .service-icon svg{width:22px; height:22px;}
  .service-row h3{font-size:1.2rem; letter-spacing:0.4px;}
  .service-row p{color:var(--muted); margin-top:10px; max-width:64ch; font-size:0.98rem;}
  .tag{
    display:inline-block;
    margin-top:16px;
    font-family:'JetBrains Mono', monospace;
    font-size:0.72rem;
    letter-spacing:1.2px;
    color:var(--muted);
    border:1px solid var(--line);
    padding:6px 12px;
  }

  /* ---------- active projects ---------- */
  .project-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:24px;
    margin-top:44px;
  }
  .project-card{
    display:flex;
    flex-direction:column;
    height:100%;
    cursor:pointer;
    text-decoration:none;
    color:var(--text);
    border:1px solid var(--line);
    background:var(--panel);
    overflow:hidden;
    transition:transform .25s ease, border-color .25s ease;
  }
  .project-card:hover, .project-card:focus-visible{
    transform:translateY(-6px);
    border-color:var(--accent, var(--accent));
    box-shadow:0 0 0 1px var(--accent), 0 28px 52px -28px var(--accent);
  }
  .project-photo{flex:0 0 190px; height:190px; overflow:hidden; background:#0b0f16;}
  .project-photo img{
    width:100%; height:100%; object-fit:cover; display:block;
    transition:transform .35s ease;
  }
  .project-card:hover .project-photo img{transform:scale(1.05);}
  .project-body{
    display:flex;
    flex-direction:column;
    flex:1;
    padding:22px 22px 26px;
  }
  .project-body h3{font-size:1.05rem; letter-spacing:0.3px;}
  .project-body p{color:var(--muted); margin-top:10px; font-size:0.92rem;}
  .project-body .tag{margin-top:auto; align-self:flex-start; padding-top:16px;}

  /* ---------- project modal ---------- */
  body.modal-open{overflow:hidden;}
  .project-modal{
    position:fixed; inset:0;
    z-index:100;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:24px;
    visibility:hidden;
    opacity:0;
    transition:opacity .25s ease, visibility 0s linear .25s;
  }
  .project-modal.open{
    visibility:visible;
    opacity:1;
    transition:opacity .25s ease;
  }
  .project-modal-backdrop{
    position:absolute; inset:0;
    background:rgba(6,9,14,0.82);
    backdrop-filter:blur(3px);
  }
  .project-modal-panel{
    position:relative;
    width:min(760px, 100%);
    max-height:90vh;
    overflow-y:auto;
    background:var(--panel);
    border:1px solid var(--line);
    box-shadow:0 0 0 1px var(--accent, var(--line)), 0 40px 80px -30px rgba(0,0,0,0.6);
    transform:translateY(16px) scale(0.98);
    transition:transform .3s ease;
  }
  .project-modal.open .project-modal-panel{transform:translateY(0) scale(1);}
  .project-modal-close{
    position:absolute; top:14px; right:14px;
    width:38px; height:38px;
    display:flex; align-items:center; justify-content:center;
    background:var(--bg);
    border:1px solid var(--line);
    color:var(--text);
    font-size:1.4rem;
    line-height:1;
    cursor:pointer;
    z-index:2;
    transition:border-color .2s ease, color .2s ease;
  }
  .project-modal-close:hover{border-color:var(--accent); color:var(--accent);}
  .project-modal-photo{height:320px; overflow:hidden; background:#0b0f16;}
  .project-modal-photo img{width:100%; height:100%; object-fit:cover; display:block;}
  .project-modal-body{padding:32px 36px 40px;}
  .project-modal-body h3{
    font-family:'Anton', sans-serif;
    text-transform:uppercase;
    font-size:clamp(1.4rem, 3vw, 2rem);
    letter-spacing:0.3px;
    max-width:24ch;
  }
  .project-modal-text{margin-top:20px;}
  .project-modal-text p{color:var(--muted); font-size:1rem; margin-top:14px;}
  .project-modal-text p:first-child{margin-top:0;}

  /* ---------- final CTA ---------- */
  .cta{
    text-align:center;
    padding:96px 0;
    border-bottom:1px solid var(--line);
  }
  .cta h2{font-size:clamp(2.2rem, 5vw, 3.2rem); margin-top:18px;}
  .cta p.lead{color:var(--muted); max-width:52ch; margin:22px auto 0; font-size:1.02rem;}
  .cta-ctas{margin-top:36px; display:flex; gap:14px; justify-content:center; flex-wrap:wrap;}
  .contact-row{
    margin-top:56px;
    display:flex; justify-content:center; gap:64px; flex-wrap:wrap;
  }
  .contact-item .l{
    font-family:'JetBrains Mono', monospace;
    color:var(--muted);
    font-size:0.7rem;
    letter-spacing:1.4px;
    text-transform:uppercase;
  }
  .contact-item .v{margin-top:6px; color:var(--accent); font-size:0.98rem; text-decoration:none; display:block;}

  .contact-form{
    margin:64px auto 0;
    max-width:560px;
    text-align:left;
    border:1px solid var(--line);
    background:var(--panel);
    padding:36px;
  }
  .contact-form .form-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
  }
  .contact-form .field{margin-bottom:20px;}
  .contact-form .form-row .field{margin-bottom:0;}
  .contact-form label{
    display:block;
    font-family:'JetBrains Mono', monospace;
    font-size:0.7rem;
    letter-spacing:1.2px;
    text-transform:uppercase;
    color:var(--muted);
    margin-bottom:8px;
  }
  .contact-form input,
  .contact-form textarea{
    width:100%;
    background:var(--bg);
    border:1px solid var(--line);
    color:var(--text);
    font-family:'Inter', sans-serif;
    font-size:0.94rem;
    padding:11px 12px;
    resize:vertical;
  }
  .contact-form input:focus,
  .contact-form textarea:focus{outline:none; border-color:var(--accent);}

  /* ---------- footer ---------- */
  footer{padding:36px 0;}
  .footer-inner{
    display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px;
  }
  footer nav{display:flex; gap:28px; flex-wrap:wrap;}
  footer nav a{color:var(--muted); text-decoration:none; font-size:0.9rem;}
  footer nav a:hover{color:var(--text);}
  .foot-copy{
    color:var(--muted); font-size:0.8rem; font-family:'JetBrains Mono', monospace;
    margin-top:24px; padding-top:24px; border-top:1px solid var(--line);
    display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px;
  }
  /*Logo at the bottom */
.cta{
  background:#ffffff;
  border-bottom:none;
}
.brand-mark{
  display:flex;
  flex-direction:column;
  align-items:center;
}
.cta .mono::before{background:var(--accent);}
.cta h2{color:#12151b;}
.cta p.lead{color:#555;}
.contact-form{
  background:#ffffff;
  border:1px solid #ddd;
}
.contact-form label{color:#777;}
.contact-form input,
.contact-form textarea{
  background:#ffffff;
  border:1px solid #ccc;
  color:#12151b;
}
.contact-form input:focus,
.contact-form textarea:focus{border-color:var(--accent);}
.brand-word{color:#52565fef;
  margin-top:20px;
  font-family:'Anton', sans-serif;
  text-transform:uppercase;
  letter-spacing:0.5px;
  font-size:1.15rem;
}
footer{
  background:#f5f5f0;
  border-top:1px solid #ddd;
}
footer .logo{color:#12151b;}
footer nav a{color:#666;}
footer nav a:hover{color:#12151b;}
.foot-copy{color:#888; border-top-color:#ddd;}
@media (max-width: 760px){
  .cta-wrap{grid-template-columns:1fr; gap:48px;}
  .contact-right{order:-1;}
}

  @media (max-width: 760px){
    .service-row{grid-template-columns:1fr;}
    .project-grid{grid-template-columns:1fr;}
    .contact-row{gap:32px;}
    .contact-form{padding:24px;}
    .contact-form .form-row{grid-template-columns:1fr;}
    .project-modal{padding:0;}
    .project-modal-panel{width:100%; max-height:100vh; height:100vh; overflow-y:auto;}
    .project-modal-photo{height:220px;}
    .project-modal-body{padding:24px 22px 32px;}
  }