:root{
  --ink:#E7EEF9;
  --ink-dim:#95A6C2;
  --bg:#0A0F1C;
  --bg-2:#0E1526;
  --surface:#111A2E;
  --line:rgba(150,178,220,0.18);
  --line-strong:rgba(150,178,220,0.38);
  --blue:#5EA0FF;
  --blue-dim:#2E4C7A;
  --amber:#FF7A3D;
  --amber-dim:#8A4A2A;
  --radius:2px;
  --mono:'JetBrains Mono', monospace;
  --display:'Space Grotesk', sans-serif;
  --body:'IBM Plex Sans', sans-serif;
  --pad: 28px;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:
    linear-gradient(var(--line) 1px, transparent 1px) 0 0/48px 48px,
    linear-gradient(90deg, var(--line) 1px, transparent 1px) 0 0/48px 48px,
    var(--bg);
  background-attachment:fixed;
  color:var(--ink);
  font-family:var(--body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;}
img,svg{display:block; max-width:100%;}
.wrap{max-width:1180px; margin:0 auto; padding:0 var(--pad);}
.mono{font-family:var(--mono); letter-spacing:0.04em;}
.eyebrow{
  font-family:var(--mono); font-size:12px; letter-spacing:0.18em;
  text-transform:uppercase; color:var(--blue); display:flex; align-items:center; gap:10px;
}
.eyebrow::before{content:''; width:18px; height:1px; background:var(--blue);}

@media (max-width:640px){
  :root{ --pad: 20px; }
}

/* ---------- Header ---------- */
header{
  position:sticky; top:0; z-index:50;
  background:rgba(10,15,28,0.86); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav{display:flex; align-items:center; justify-content:space-between; padding:18px 0; position:relative;}
.logo{font-family:var(--display); font-weight:700; font-size:19px; letter-spacing:0.01em;}
.logo span{color:var(--blue);}
.nav-links{display:flex; align-items:center; gap:34px; font-size:14px; font-family:var(--mono);}
.nav-links a{color:var(--ink-dim); text-decoration:none; transition:color .2s;}
.nav-links a:hover{color:var(--ink);}
.btn{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:13px; letter-spacing:0.03em;
  padding:11px 20px; border-radius:var(--radius); text-decoration:none;
  border:1px solid var(--line-strong); cursor:pointer; background:transparent; color:var(--ink);
  transition: all .2s;
}
.btn-primary{background:var(--amber); border-color:var(--amber); color:#1A0D06; font-weight:600;}
.btn-primary:hover{background:#ff8a54;}
.btn:hover{border-color:var(--blue); color:var(--blue);}

.nav-toggle{
  display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:8px;
}
.nav-toggle span{width:22px; height:2px; background:var(--ink); transition:transform .25s, opacity .25s;}
.nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-toggle.open span:nth-child(2){opacity:0;}
.nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

@media (max-width:760px){
  .nav-toggle{display:flex;}
  .nav-links{
    position:absolute; top:100%; left:0; right:0; flex-direction:column; align-items:stretch;
    background:var(--bg-2); border-bottom:1px solid var(--line); padding:10px var(--pad) 20px;
    gap:0; max-height:0; overflow:hidden; transition:max-height .3s ease;
  }
  .nav-links.open{max-height:260px;}
  .nav-links a{padding:14px 0; border-bottom:1px solid var(--line);}
  .nav-links a.btn{margin-top:14px; justify-content:center; border:1px solid var(--amber);}
}

/* ---------- Hero ---------- */
.hero{padding:88px 0 64px; position:relative; overflow:hidden;}
@media (max-width:640px){ .hero{padding:56px 0 48px;} }

.titleblock{
  display:inline-grid; grid-template-columns:repeat(4,auto); border:1px solid var(--line-strong);
  font-family:var(--mono); font-size:11px; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--ink-dim); margin-bottom:40px; max-width:100%; overflow-x:auto;
}
.titleblock div{padding:8px 16px; border-right:1px solid var(--line-strong); white-space:nowrap;}
.titleblock div:last-child{border-right:none;}
.titleblock b{display:block; color:var(--blue); font-size:11px; margin-top:2px;}
@media (max-width:520px){
  .titleblock{grid-template-columns:repeat(2,auto);}
  .titleblock div:nth-child(2){border-right:none;}
}

.hero h1{
  font-family:var(--display); font-weight:600; font-size:clamp(32px,7vw,68px);
  line-height:1.08; letter-spacing:-0.01em; max-width:15ch;
}
.hero h1 em{font-style:normal; color:var(--blue);}
.draft-line{width:min(560px,100%); height:14px; margin:24px 0 28px;}
.draft-line path{fill:none; stroke:var(--amber); stroke-width:2; stroke-dasharray:600; stroke-dashoffset:600; animation:draw 1.4s ease forwards .3s;}
@keyframes draw{to{stroke-dashoffset:0;}}
.hero p.lede{font-size:clamp(15px,2vw,18px); color:var(--ink-dim); max-width:56ch; margin-bottom:30px;}
.hero-ctas{display:flex; gap:14px; flex-wrap:wrap;}
.hero-ctas .btn{flex:1 1 auto; justify-content:center;}
@media (min-width:480px){ .hero-ctas .btn{flex:0 1 auto;} }

.hero-meta{
  display:flex; gap:40px; margin-top:56px; flex-wrap:wrap;
  border-top:1px solid var(--line); padding-top:22px;
}
.hero-meta div{font-family:var(--mono); font-size:12px; color:var(--ink-dim); text-transform:uppercase; letter-spacing:0.06em;}
.hero-meta b{display:block; font-family:var(--display); font-size:clamp(18px,3vw,24px); color:var(--ink); text-transform:none; letter-spacing:0; margin-top:4px;}

/* ---------- Sections generic ---------- */
section{padding:72px 0;}
@media (max-width:640px){ section{padding:52px 0;} }
.section-head{display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:44px; flex-wrap:wrap;}
.section-head h2{font-family:var(--display); font-size:clamp(26px,4.5vw,40px); font-weight:600; letter-spacing:-0.01em;}
.section-head p{color:var(--ink-dim); max-width:44ch; font-size:15px;}

/* ---------- Services ---------- */
#services{border-top:1px solid var(--line);}
.grid-services{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(250px,1fr));
  gap:1px; background:var(--line); border:1px solid var(--line);
}
.card{
  background:var(--bg-2); padding:30px 26px; position:relative;
  transition:background .25s;
}
.card:hover{background:var(--surface);}
.card::before, .card::after{
  content:''; position:absolute; width:16px; height:16px;
  border:1px solid var(--line-strong); transition:all .25s;
}
.card::before{top:10px; left:10px; border-right:none; border-bottom:none;}
.card::after{bottom:10px; right:10px; border-left:none; border-top:none;}
.card:hover::before, .card:hover::after{width:22px; height:22px; border-color:var(--amber);}
.card-id{font-family:var(--mono); font-size:12px; color:var(--amber); letter-spacing:0.1em; margin-bottom:16px; display:block;}
.card h3{font-family:var(--display); font-size:21px; font-weight:600; margin-bottom:10px;}
.card p.desc{color:var(--ink-dim); font-size:14.5px; margin-bottom:16px;}
.card ul{list-style:none;}
.card li{
  font-size:13.5px; color:var(--ink); padding:7px 0 7px 18px; position:relative;
  border-top:1px solid var(--line); font-family:var(--body);
}
.card li:first-child{border-top:none;}
.card li::before{content:'—'; position:absolute; left:0; color:var(--blue); font-family:var(--mono);}

/* ---------- Why strip ---------- */
#why{border-top:1px solid var(--line);}
.why-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:28px;}
.why-item{padding:20px 0; border-top:1px solid var(--line-strong);}
.why-item .num{font-family:var(--mono); font-size:12px; color:var(--blue);}
.why-item h4{font-family:var(--display); font-size:17px; margin:10px 0 8px; font-weight:600;}
.why-item p{font-size:14px; color:var(--ink-dim);}

/* ---------- Contact ---------- */
#contact{border-top:1px solid var(--line);}
.contact-shell{
  display:grid; grid-template-columns:0.9fr 1.1fr; gap:0; border:1px solid var(--line-strong);
}
@media (max-width:860px){ .contact-shell{grid-template-columns:1fr;} }
.contact-side{padding:36px; background:var(--bg-2); border-right:1px solid var(--line-strong);}
@media (max-width:860px){ .contact-side{border-right:none; border-bottom:1px solid var(--line-strong);} }
.contact-side h2{font-family:var(--display); font-size:clamp(22px,3vw,28px); margin-bottom:14px; font-weight:600;}
.contact-side p{color:var(--ink-dim); font-size:14.5px; margin-bottom:24px;}
.contact-line{display:flex; justify-content:space-between; gap:12px; padding:12px 0; border-top:1px solid var(--line); font-family:var(--mono); font-size:13px;}
.contact-line span:first-child{color:var(--ink-dim); text-transform:uppercase; letter-spacing:0.06em;}

.contact-form{padding:36px;}
@media (max-width:520px){ .contact-form, .contact-side{padding:26px 20px;} }
.field{margin-bottom:18px;}
.field label{display:block; font-family:var(--mono); font-size:11.5px; text-transform:uppercase; letter-spacing:0.08em; color:var(--ink-dim); margin-bottom:8px;}
.field input, .field select, .field textarea{
  width:100%; background:var(--surface); border:1px solid var(--line-strong); border-radius:var(--radius);
  color:var(--ink); padding:12px 14px; font-family:var(--body); font-size:14.5px; outline:none;
  transition:border-color .2s;
}
.field input:focus, .field select:focus, .field textarea:focus{border-color:var(--blue);}
.field textarea{resize:vertical; min-height:110px;}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
@media (max-width:480px){ .row2{grid-template-columns:1fr;} }

.hp{position:absolute; left:-9999px; top:-9999px; width:1px; height:1px; overflow:hidden;}

.recaptcha-wrap{margin-bottom:18px; transform-origin:left top;}
@media (max-width:340px){ .recaptcha-wrap{transform:scale(0.9);} }

.form-msg{font-family:var(--mono); font-size:13px; margin-top:16px; padding:12px 14px; border-radius:var(--radius); display:none;}
.form-msg.show{display:block;}
.form-msg.ok{background:rgba(94,160,255,0.12); border:1px solid var(--blue-dim); color:var(--blue);}
.form-msg.err{background:rgba(255,122,61,0.1); border:1px solid var(--amber-dim); color:var(--amber);}
.submit-btn{width:100%; justify-content:center; padding:13px 20px; font-size:14px; margin-top:6px;}

/* ---------- Footer ---------- */
footer{border-top:1px solid var(--line); padding:30px 0;}
.foot-row{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px;
  font-family:var(--mono); font-size:12px; color:var(--ink-dim); text-align:center;}

.reveal{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease;}
.reveal.in{opacity:1; transform:translateY(0);}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1; transform:none; transition:none;}
  .draft-line path{animation:none; stroke-dashoffset:0;}
  html{scroll-behavior:auto;}
}