:root{--bg:#021E28;--bg-alt:#012F3D;--fg:#E6F4F1;--muted:#A8C3C0;--brand:#3FB79A;--brand-2:#1FAAA0;--accent:#FFD86C;--stroke:rgba(255,255,255,.08);--shadow:0 10px 30px rgba(0,0,0,.35)}
*{box-sizing:border-box}
body{margin:0;background:
radial-gradient(1200px 600px at 70% -10%, rgba(79,216,179,.08), transparent),
radial-gradient(800px 400px at -10% 10%, rgba(63,183,154,.06), transparent),
var(--bg);color:var(--fg);font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif}
a{color:var(--brand);text-decoration:none}
a:hover{color:var(--accent)}
.wrap{max-width:min(1200px,92vw);margin:auto;padding:16px 16px 36px}
header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 0}
.logo{display:flex;gap:10px;align-items:center;font-weight:700}
.logo .dot{width:10px;height:10px;border-radius:999px;background:linear-gradient(45deg,var(--brand),var(--accent))}
nav{display:flex;gap:6px;flex-wrap:wrap}
nav a{padding:8px 12px;border-radius:12px}
nav a:hover,nav a[aria-current="page"]{background:rgba(255,255,255,.06)}

.hero-banner{position:relative;width:100%;height:clamp(220px,30vw,460px);background:var(--bg-alt);overflow:hidden;border-bottom:1px solid var(--stroke)}
.hero-banner .banner-img{width:100%;height:100%;object-fit:contain;object-position:center;display:block;background:var(--bg-alt)}
.banner-overlay{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.18),rgba(0,0,0,0) 50%,rgba(0,0,0,.25))}

.intro{max-width:980px;margin:0 auto;text-align:center;padding:24px 16px}
.intro h1{font-size:clamp(28px,3.8vw,40px);margin:0 0 8px}
.intro p{color:var(--muted);margin:0 0 16px}
.btn{display:inline-block;margin:6px;padding:12px 16px;border-radius:14px;border:1px solid var(--stroke);background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02))}
.btn.primary{border:0;background:linear-gradient(90deg,var(--brand),var(--brand-2));color:#01231E;font-weight:700;box-shadow:var(--shadow)}

.about{padding:24px 0}
.about-grid{display:grid;grid-template-columns:1.2fr 0.8fr;gap:clamp(24px,5vw,60px);align-items:center}
.about-text p{margin-bottom:1em;color:var(--muted);text-align:justify}
.about-photo{text-align:center}
.portrait{width:100%;max-width:420px;height:auto;border-radius:22px;border:1px solid var(--stroke);box-shadow:0 10px 30px rgba(0,0,0,.3)}

.contact{max-width:760px;margin:0 auto;text-align:center;padding:8px 10px}
.contact-form{display:flex;flex-direction:column;gap:16px;text-align:left;padding:28px 24px;border-radius:22px;border:1px solid var(--stroke);background:linear-gradient(180deg,rgba(1,47,61,.72),rgba(1,47,61,.56));backdrop-filter:blur(6px);box-shadow:var(--shadow)}
.form-group{display:flex;flex-direction:column;gap:6px}
label{font-weight:600}
input,textarea{font:inherit;color:var(--fg);padding:12px 14px;border-radius:12px;background:rgba(255,255,255,.06);border:1px solid var(--stroke)}
input:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 2px rgba(248,216,108,.25)}

.footerX{margin-top:40px;padding:20px;border-radius:22px;border:1px solid var(--stroke);background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02))}
.footerX .bottom{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.footerX .social{display:flex;gap:10px}
.icon-btn{width:38px;height:38px;display:grid;place-items:center;border-radius:999px;border:1px solid var(--stroke);background:rgba(255,255,255,.04)}

/* ===== About responsive fix ===== */
@media (min-width:821px){
  .about{padding:32px 0 48px}
  .about-grid{grid-template-columns:minmax(0,68ch) 440px;gap:56px;align-items:start}
  .about-text p{text-align:justify;text-justify:inter-word;hyphens:auto}
  .about-photo .portrait{width:100%;max-width:440px;aspect-ratio:4/5;object-fit:cover;border-radius:22px;box-shadow:0 14px 36px rgba(0,0,0,.28)}
}
@media (max-width:820px){
  .about{padding:18px 0 28px}
  .about-grid{grid-template-columns:1fr;gap:22px}
  .about-photo{order:-1;text-align:center;float:none!important}
  .about-photo .portrait{width:88vw;max-width:360px;height:auto;border-radius:18px;border:1px solid var(--stroke);box-shadow:0 12px 28px rgba(0,0,0,.26);object-fit:cover}
  .about-text{padding:0 16px;margin:0 auto;max-width:92vw}
  .about-text h1{font-size:clamp(24px,6vw,28px);margin:6px 0 10px;text-align:left}
  .about-text p{font-size:17.5px;line-height:1.85;text-align:left;margin:0 0 1.1em;text-wrap:pretty}
}
.about-photo,.about-photo .portrait{float:none!important}