/* ============================================
   Manela Solutions — design tokens v2
   Direction: clean · corporate · minimal · trustworthy
   ============================================ */
:root{
  --ink: #101B2D;
  --ink-soft: #3D4A5C;
  --slate: #6B7688;
  --canvas: #FFFFFF;
  --panel: #F6F7F9;
  --line: #E3E6EB;

  --trust: #1D4E82;      /* primary brand blue */
  --trust-deep: #123657; /* hover / deep state */
  --accent: #F5821F;     /* logo orange — used sparingly, never as a large fill */

  --display: 'Sora', sans-serif;
  --body: 'Inter', sans-serif;
  --mono: 'IBM Plex Mono', monospace;

  --maxw: 1140px;
  --radius: 6px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--canvas);
  color:var(--ink);
  font-family:var(--body);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 32px;}

h1,h2,h3{
  font-family:var(--display);
  line-height:1.15;
  margin:0 0 .45em;
  letter-spacing:-0.015em;
  color:var(--ink);
}
h1{font-size:clamp(2.3rem, 4.4vw, 3.6rem); font-weight:600;}
h2{font-size:clamp(1.6rem, 2.6vw, 2.2rem); font-weight:600;}
h3{font-size:1.14rem; font-weight:600;}
p{margin:0 0 1em; color:var(--ink-soft);}

.eyebrow{
  font-family:var(--mono);
  font-size:.74rem;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:var(--trust);
  display:flex;
  align-items:center;
  gap:.6em;
  margin-bottom:1em;
  font-weight:500;
}
.eyebrow::before{
  content:"";
  width:16px; height:2px;
  background:var(--accent);
  display:inline-block;
}

/* ---------- header ---------- */
header.site{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,0.94);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 0;
}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none;}
.brand img{height:34px; width:auto;}
.brand span{font-family:var(--display); font-weight:600; font-size:1.02rem; color:var(--ink);}
nav.links{display:flex; gap:32px; font-size:.92rem;}
nav.links a{text-decoration:none; color:var(--ink-soft); font-weight:500;}
nav.links a:hover, nav.links a.active{color:var(--trust);}
.btn{
  font-family:var(--body); font-weight:600; font-size:.88rem;
  padding:11px 22px; border-radius:var(--radius);
  text-decoration:none; display:inline-block;
  background:var(--trust); color:#fff !important;
  transition:background .15s ease, transform .15s ease;
  border:1px solid var(--trust);
}
.btn:hover{background:var(--trust-deep); border-color:var(--trust-deep);}
.btn.ghost{background:transparent; color:var(--ink) !important; border:1px solid var(--line);}
.btn.ghost:hover{border-color:var(--trust); color:var(--trust) !important; background:transparent;}
.btn.flame{background:var(--trust);}
.btn.flame:hover{background:var(--trust-deep);}

/* ---------- hero ---------- */
.hero{padding:88px 0 64px;}
.hero-grid{display:grid; grid-template-columns:1.25fr 1fr; gap:64px; align-items:start;}
.hero p.lede{font-size:1.14rem; max-width:46ch;}
.hero-actions{display:flex; gap:14px; margin-top:24px;}

/* status panel — refined data card, the signature element */
.ledger{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
}
.ledger-head{
  background:var(--canvas);
  border-bottom:1px solid var(--line);
  font-family:var(--mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--slate);
  padding:14px 20px;
  display:flex; justify-content:space-between;
  position:relative;
}
.ledger-head::before{
  content:"";
  position:absolute; top:0; left:0; right:0; height:2px;
  background:var(--trust);
}
.ledger-row{
  display:flex; justify-content:space-between; align-items:baseline;
  padding:14px 20px; border-bottom:1px solid var(--line);
  font-size:.92rem;
}
.ledger-row:last-child{border-bottom:none;}
.ledger-row .val{font-family:var(--mono); color:var(--ink); font-weight:500; font-size:.88rem;}
.ledger-row .lbl{color:var(--slate);}

/* ---------- sections ---------- */
section{padding:72px 0;}
section.alt{background:var(--panel); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.section-head{max-width:60ch; margin-bottom:44px;}

.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center;}

.card{
  background:var(--canvas);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:30px 28px;
}
.card .num{
  font-family:var(--mono); color:var(--trust); font-size:.78rem;
  margin-bottom:14px; display:inline-block;
  border:1px solid var(--line); border-radius:20px; padding:3px 10px;
}

/* process steps — real sequence, numbering justified */
.steps{display:flex; flex-direction:column;}
.step{
  display:grid; grid-template-columns:56px 1fr; gap:22px;
  padding:26px 0; border-top:1px solid var(--line);
}
.steps .step:last-child{border-bottom:1px solid var(--line);}
.step .n{font-family:var(--mono); color:var(--trust); font-size:1.15rem; font-weight:600;}

/* portfolio */
.proj{
  background:var(--canvas); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
}
.proj img{border-bottom:1px solid var(--line);}
.proj .body{padding:22px;}
.proj .tag{font-family:var(--mono); font-size:.7rem; color:var(--trust); text-transform:uppercase; letter-spacing:.08em;}

/* blog */
.post-card{padding:26px 0; border-top:1px solid var(--line);}
.post-list .post-card:last-child{border-bottom:1px solid var(--line);}
.post-meta{font-family:var(--mono); font-size:.72rem; color:var(--slate); margin-bottom:8px; letter-spacing:.06em;}
.post-card h3 a{text-decoration:none;}
.post-card h3 a:hover{color:var(--trust);}

/* contact */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:52px;}
.field{margin-bottom:18px;}
.field label{display:block; font-family:var(--mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--slate); margin-bottom:7px;}
.field input, .field textarea{
  width:100%; padding:12px 14px; border:1px solid var(--line); border-radius:4px;
  font-family:var(--body); font-size:.95rem; background:#fff; color:var(--ink);
}
.field input:focus, .field textarea:focus{outline:none; border-color:var(--trust);}
.field textarea{min-height:130px; resize:vertical;}
.contact-info .ledger-row .lbl{width:90px;}
.contact-info a:hover{color:var(--trust);}

/* footer */
footer{padding:44px 0; border-top:1px solid var(--line);}
.footer-grid{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:18px;}
footer .brand span{font-size:.92rem;}
footer .meta{font-family:var(--mono); font-size:.76rem; color:var(--slate);}
footer nav.links a{font-size:.85rem;}

@media (max-width:860px){
  .hero-grid, .grid-2, .grid-3, .contact-grid{grid-template-columns:1fr;}
  nav.links{display:none;}
}