:root{
  --bg:#ffffff;
  --surface:#ffffff;
  --surface-alt:#f6f7f9;
  --text:#161618;
  --muted:#6b6c70;
  --line:#e3e4e8;
  --blue:#1459c7;
  --blue-dark:#0f46a0;
  --burnt:#B35512;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.58;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

.container{max-width:1120px;margin:0 auto;padding:0 26px}

.site-header{
  position:sticky;top:0;z-index:20;
  background:rgba(255,255,255,.88);
  border-bottom:1px solid #efeff2;
  backdrop-filter:blur(10px);
}
.nav{min-height:64px;display:flex;align-items:center;justify-content:space-between;gap:14px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text);font-weight:600;letter-spacing:.01em}
.brand img{width:28px;height:28px;border-radius:999px}
nav{display:flex;gap:18px;flex-wrap:wrap}
nav a{text-decoration:none;color:#3c3d42;font-weight:500}
nav a:hover{color:#0f1012}

.hero{padding:20px 0 6px;background:#fff}
.hero-grid{
  border:1px solid #eceef2;
  border-radius:26px;
  padding:24px 34px;
  background:linear-gradient(115deg,rgba(12,49,113,.78),rgba(12,49,113,.42)),url('images/hero-01.jpg') center/cover;
  min-height:150px;
  display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;
  box-shadow:0 10px 26px rgba(15,23,42,.08);
}
.eyebrow{margin:0 0 8px;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:#d6e8ff;font-weight:700}
h1,h2{font-family:'Bebas Neue',Inter,sans-serif;letter-spacing:.02em;font-weight:400}
.hero h1{margin:0 0 8px;color:#fff;font-size:clamp(1.55rem,3.2vw,2.45rem);line-height:1;max-width:20ch}
.lead{margin:0;max-width:66ch;color:#edf4ff;font-size:.96rem}
.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px;justify-content:center}

.btn{display:inline-flex;align-items:center;justify-content:center;padding:10px 16px;border-radius:999px;text-decoration:none;font-weight:600;transition:.2s ease}
.btn-primary{background:var(--blue);color:#fff;box-shadow:0 6px 16px rgba(20,89,199,.28)}
.btn-primary:hover{background:var(--blue-dark)}
.btn-secondary{background:rgba(255,255,255,.98);color:#1d1d20;border:1px solid #d4d5da}
.btn-secondary:hover{border-color:#b8bac2}

.section{padding:44px 0}
.section h2{margin:0 0 12px;font-size:clamp(2rem,3.4vw,2.9rem);line-height:1}
.section p{color:var(--muted);margin:0}

#about,#stack,#contact{background:#fff}

.two-col{display:grid;grid-template-columns:1.2fr .8fr;gap:20px}
.panel,.card,.work-card,.contact{
  background:#fff;
  border:1px solid var(--line);
  border-radius:20px;
  box-shadow:0 3px 18px rgba(16,24,40,.05);
}
.panel{padding:22px}
.panel h3{margin:0 0 10px}
.panel ul{margin:0;padding-left:18px;color:var(--muted)}

.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.card{padding:20px}
.card span{font-family:'Bebas Neue';font-size:1.6rem;color:var(--burnt)}
.card h3{margin:4px 0 7px}
.card p{margin:0;color:var(--muted)}

.stack-frame{padding:22px;border:1px solid var(--line);border-radius:20px;background:#fff;box-shadow:0 3px 18px rgba(16,24,40,.05)}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chips span{padding:8px 12px;border-radius:999px;border:1px solid #dbdde3;background:#fff;color:#242528;font-weight:600}
.chips span:nth-child(odd){border-color:#e2c3ae;background:#fff6f0;color:#8a4313}

.work-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.work-card{overflow:hidden}
.work-card img{width:100%;height:188px;object-fit:cover;display:block}
.work-card h3{margin:14px 14px 7px}
.work-card p{margin:0 14px 16px;color:var(--muted)}

.contact{padding:26px}
.contact p{margin:0 0 10px}

.site-footer{margin-top:34px;background:#fff;border-top:1px solid #ececf1}
.footer-links{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;padding:20px 24px}
.footer-links a{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:999px;border:1px solid #ddd;background:#fff;text-decoration:none;color:#555}
.footer-links a svg{width:20px;height:20px;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}
.footer-links a.icon-x{color:#000}
.footer-links a.icon-instagram{color:#E4405F}
.footer-links a.icon-youtube{color:#FF0000}
.footer-links a.icon-photo{color:var(--burnt)}

@media (max-width:980px){
  .container{padding:0 18px}
  .hero-grid{padding:22px 22px;min-height:140px}
  .two-col,.steps,.work-grid{grid-template-columns:1fr}
  .actions .btn{width:100%}
  .section{padding:34px 0}
}

a:focus-visible,button:focus-visible{outline:3px solid #1d4fd8;outline-offset:2px;border-radius:8px}