:root{
  --accent: #ff6a00; /* vibrant orange */
  --accent-dark: #cc5200;
  --bg: #ffffff;
  --text: #0f1724;
  --muted: #6b7280;
  --radius:12px;
  --container:1100px;
}
*{box-sizing:border-box}
body{font-family:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; margin:0; color:var(--text); background:var(--bg)}
a{color:var(--accent)}
header{background:white;border-bottom:1px solid #ffeee6}
.wrap{max-width:var(--container);margin:0 auto;padding:28px}
.logo{display:flex;align-items:center;gap:14px}
.mark img{height:56px;width:auto;border-radius:8px}
nav{display:flex;align-items:center;justify-content:space-between}
.nav-links{display:flex;gap:18px;align-items:center}
.btn-primary{background:var(--accent);color:white;padding:10px 16px;border-radius:10px;text-decoration:none;font-weight:600}

/* Hero */
.hero{display:flex;gap:40px;align-items:center;padding:40px 0}
.hero-left{flex:1}
.hero h1{margin:0;font-size:34px;color:var(--accent-dark);line-height:1.05}
.hero p{color:var(--muted);margin-top:10px}
.hero-cta{margin-top:20px;display:flex;gap:12px}
.hero-img{flex:1;display:flex;align-items:center;justify-content:center}
.frame{width:100%;max-width:520px;height:320px;background:linear-gradient(180deg,#fff,#fff7f2);border-radius:14px;border:1px solid #fff0e6;display:flex;align-items:center;justify-content:center}

/* Cards */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{background:white;padding:18px;border-radius:14px;box-shadow:0 6px 20px rgba(12,78,161,0.04);border:1px solid #fff2ea}
.muted{color:var(--muted)}

/* Portfolio */
.portfolio-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.port-item{background:#fff;border-radius:12px;padding:10px;border:1px solid #fff2ea}
.port-img{height:150px;background:#fff7f2;border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--muted)}

/* Footer */
footer{background:#111;color:white;padding:30px 0;margin-top:30px}
.footer-links a{color:#ffd6b8;text-decoration:none}

/* Responsive */
@media(max-width:900px){.grid,.portfolio-grid{grid-template-columns:repeat(2,1fr)}.hero{flex-direction:column}.nav-links{display:none}}
@media(max-width:560px){.grid,.portfolio-grid{grid-template-columns:1fr}}