@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

:root { --bg:#f7f8fc; --surface:#fff; --card:#292f38; --text:#202530; --muted:#718096; --border:#e3e7ef; --primary:#6e57e0; --primary-hover:#5843c7; --input:#f8f9fc; --shadow:0 18px 50px rgba(25,31,45,.09); }
body.dark-mode { --bg:#1b1f25; --surface:#22272f; --card:#323944; --text:#f1f5f9; --muted:#94a3b8; --border:#3b4350; --input:#252b33; --shadow:0 18px 50px rgba(0,0,0,.25); }
* { box-sizing:border-box; margin:0; padding:0; font-family:'Poppins',sans-serif; }
html { scroll-behavior:smooth; }
body { min-width:320px; background:var(--bg); color:var(--text); transition:background .35s,color .35s; }
.page-shell { min-height:100vh; overflow:hidden; }
.site-header { height:78px; padding:0 clamp(20px,7vw,110px); display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--border); background:color-mix(in srgb,var(--bg) 92%,transparent); position:relative; z-index:5; }
.brand { color:#35c6d0; font-size:23px; font-weight:700; text-decoration:none; letter-spacing:-.6px; }.brand b { color:#9aa8bb; margin-left:3px; }
.header-actions { display:flex; align-items:center; gap:12px; }.theme-toggle,.home-link { border:1px solid var(--border); background:var(--surface); color:var(--text); border-radius:10px; transition:.25s; }.theme-toggle { width:42px; height:42px; cursor:pointer; }.theme-toggle:hover,.home-link:hover { color:var(--primary); transform:translateY(-2px); }.home-link { padding:10px 15px; text-decoration:none; font-size:13px; font-weight:600; }.home-link i { margin-right:6px; }
.contact-section { position:relative; padding:105px 24px 78px; overflow:hidden; min-height:calc(100vh - 78px); }.contact-header { position:relative; z-index:2; text-align:center; max-width:850px; margin:0 auto; }.eyebrow { color:var(--primary); font-size:12px; font-weight:700; letter-spacing:2px; margin-bottom:12px; }.contact-header h1 { font-size:clamp(32px,4vw,43px); line-height:1.2; margin-bottom:12px; }.contact-header > p:last-child { color:var(--muted); font-size:14px; line-height:1.8; }.bilingual-intro { max-width:760px; margin:18px auto 0; padding:13px 17px; border:1px solid var(--border); border-radius:12px; background:color-mix(in srgb,var(--surface) 82%,transparent); color:var(--muted); font-size:12px; line-height:1.9; }.bilingual-intro strong { color:var(--text); }
.reveal { opacity:0; transform:translateY(24px); transition:opacity .8s ease,transform .8s cubic-bezier(.2,.75,.25,1); }.reveal-left { transform:translateX(-35px); }.reveal-right { transform:translateX(35px); }.reveal.is-visible { opacity:1; transform:none; }.contact-left.reveal.is-visible .contact-card { animation:cardPop .75s .12s both; }.contact-left.reveal.is-visible .social-link { animation:linkRise .55s both; }.contact-left.reveal.is-visible .social-link:nth-child(1) { animation-delay:.18s; }.contact-left.reveal.is-visible .social-link:nth-child(2) { animation-delay:.23s; }.contact-left.reveal.is-visible .social-link:nth-child(3) { animation-delay:.28s; }.contact-left.reveal.is-visible .social-link:nth-child(4) { animation-delay:.33s; }.contact-left.reveal.is-visible .social-link:nth-child(5) { animation-delay:.38s; }.contact-left.reveal.is-visible .social-link:nth-child(6) { animation-delay:.43s; }.contact-left.reveal.is-visible .social-link:nth-child(7) { animation-delay:.48s; }.contact-left.reveal.is-visible .social-link:nth-child(8) { animation-delay:.53s; }.contact-left.reveal.is-visible .social-link:nth-child(9) { animation-delay:.58s; }
.contact-wrapper { position:relative; z-index:2; width:min(1200px,100%); margin:52px auto 0; display:grid; grid-template-columns:.9fr 1.1fr; gap:30px; }.contact-left { display:flex; flex-direction:column; gap:20px; }.contact-card,.contact-form-card { border-radius:24px; box-shadow:var(--shadow); }.contact-card { position:relative; overflow:hidden; padding:36px 27px; background:var(--card); color:#fff; text-align:center; }.contact-card:before,.contact-card:after { content:''; position:absolute; border-radius:50%; background:rgba(255,255,255,.08); }.contact-card:before { width:180px;height:180px;top:-80px;right:-60px; }.contact-card:after { width:120px;height:120px;bottom:-50px;left:-40px; background:rgba(255,255,255,.06); }.contact-avatar { position:relative; z-index:1; width:96px;height:96px;margin:0 auto 17px;padding:4px;border:2px solid #fff;border-radius:50%;overflow:hidden;background:#fff; }.contact-avatar img { width:100%;height:100%;display:block;object-fit:cover;border-radius:50%; }.contact-card h2,.contact-role,.contact-email,.contact-buttons { position:relative; z-index:1; }.contact-card h2 { font-size:25px; margin-bottom:6px; }.contact-role { color:#d7dce5; font-size:12px; margin-bottom:22px; }.contact-email { display:flex; justify-content:center; align-items:center; gap:9px; font-size:13px; margin-bottom:23px; }.contact-buttons { display:flex; justify-content:center; flex-wrap:wrap; gap:9px; }.contact-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:10px 15px; border-radius:9px; font-size:12px; font-weight:600; cursor:pointer; text-decoration:none; transition:.25s; }.contact-btn:hover { transform:translateY(-3px); }.primary-btn { border:1px solid #fff; background:#fff; color:var(--primary); }.secondary-btn { border:1px solid rgba(255,255,255,.3); background:rgba(255,255,255,.12); color:#fff; }
.social-links { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }.social-link { display:flex; align-items:center; gap:10px; min-height:45px; padding:11px 13px; border:1px solid var(--border); border-radius:10px; background:var(--surface); color:var(--muted); text-decoration:none; font-size:12px; font-weight:600; transition:.25s; }.social-link i { width:18px; text-align:center; font-size:16px; }.social-link:hover { color:var(--primary); border-color:var(--primary); transform:translateY(-3px); box-shadow:0 8px 18px rgba(110,87,224,.12); }
.contact-form-card { padding:34px; background:var(--surface); border:1px solid var(--border); }.form-title { margin-bottom:23px; }.form-title > span { color:var(--primary); font-size:12px; font-weight:700; }.form-title h2 { color:var(--text); font-size:24px; margin-top:5px; }.form-inputs { display:flex; gap:11px; margin-bottom:11px; }.form-inputs label { width:50%; }.input-field,.contact-textarea { width:100%; border:1px solid var(--border); outline:none; background:var(--input); color:var(--text); border-radius:11px; transition:.25s; }.input-field { height:54px; padding:0 16px; }.contact-textarea { min-height:190px; padding:15px 16px; resize:vertical; display:block; }.input-field:focus,.contact-textarea:focus { border-color:var(--primary); box-shadow:0 0 0 3px rgba(110,87,224,.12); }.input-field::placeholder,.contact-textarea::placeholder { color:var(--muted); }.send-message-btn { width:100%; display:flex; align-items:center; justify-content:space-between; margin-top:14px; padding:14px 17px; border:0; border-radius:10px; background:var(--primary); color:#fff; font-weight:700; cursor:pointer; transition:.25s; }.send-message-btn:hover { background:var(--primary-hover); transform:translateY(-3px); }.send-message-btn i { transition:.25s; }.send-message-btn:hover i { transform:translateX(5px); }.form-note { margin-top:14px; color:var(--muted); text-align:center; font-size:10px; }.form-note i { margin-right:5px; }.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.contact-shape { position:absolute; border-radius:50%; opacity:.5; animation:float 8s ease-in-out infinite; }.shape-1 { width:100px;height:100px;top:18%;left:5%;background:rgba(110,87,224,.08); }.shape-2 { width:70px;height:70px;top:54%;right:7%;background:rgba(0,201,255,.1);animation-delay:1s; }.shape-3 { width:45px;height:45px;bottom:15%;left:12%;background:rgba(192,166,49,.12);animation-delay:2s; }.shape-4 { width:60px;height:60px;bottom:10%;right:15%;border:2px solid rgba(110,87,224,.12);animation-delay:3s; }@keyframes float { 50% { transform:translateY(-25px) rotate(15deg); } } @keyframes cardPop { from { opacity:0; transform:scale(.97); } to { opacity:1; transform:scale(1); } } @keyframes linkRise { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } } @keyframes avatarFloat { 50% { transform:translateY(-5px); } } @keyframes orb { 50% { transform:scale(1.08) translate(-8px,8px); } }
footer { padding:30px 20px 38px; border-top:1px solid var(--border); color:var(--muted); text-align:center; font-size:12px; }footer a { color:var(--primary); text-decoration:none; font-weight:600; }
@media (max-width:1100px) { .contact-wrapper { width:min(920px,100%); gap:22px; }.contact-form-card { padding:29px; } }
@media (max-width:900px) { .contact-section { padding-top:78px; }.contact-wrapper { grid-template-columns:1fr; max-width:650px; }.contact-form-card { order:2; } }
@media (max-width:540px) { .site-header { height:70px; padding:0 18px; }.brand { font-size:18px; }.home-link { padding:9px 10px; font-size:11px; }.contact-section { padding:62px 14px 48px; }.contact-wrapper { margin-top:35px; }.contact-form-card { padding:25px 18px; }.form-title h2 { font-size:21px; }.form-inputs { flex-direction:column; }.form-inputs label { width:100%; }.input-field { height:51px; }.contact-textarea { min-height:165px; }.contact-card { padding:32px 16px; }.social-links { grid-template-columns:1fr; }.contact-header > p:last-child { font-size:12px; line-height:1.75; }.contact-email { font-size:12px; }.reveal-left,.reveal-right { transform:translateY(24px); } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; transition-duration:.01ms !important; }.reveal { opacity:1; transform:none; } }
.contact-card { transition:transform .3s ease,box-shadow .3s ease; }
.contact-card:hover { transform:translateY(-4px); box-shadow:0 23px 55px rgba(0,0,0,.22); }
.contact-card:before { animation:orb 7s ease-in-out infinite; }
.contact-card:after { animation:orb 8s 1s ease-in-out infinite reverse; }
.contact-avatar { animation:avatarFloat 4s ease-in-out infinite; }
@keyframes cardPop { from { opacity:0; transform:scale(.97); } to { opacity:1; transform:scale(1); } }
@keyframes linkRise { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
@keyframes avatarFloat { 50% { transform:translateY(-5px); } }
@keyframes orb { 50% { transform:scale(1.08) translate(-8px,8px); } }