:root { color-scheme: dark; --ink:#fff7f7; --muted:#b7a8a8; --yellow:#ed1c24; --panel:#151010; --line:rgba(255,255,255,.1); }
* { box-sizing: border-box; }
html { min-height: 100%; background:#070707; }
body { margin:0; min-height:100vh; font-family:"Manrope",system-ui,sans-serif; color:var(--ink); background:linear-gradient(rgba(3,3,3,.38),rgba(3,3,3,.58)),url("mekark-industrial-bg.png") center/cover no-repeat fixed; }
body::before { content:""; position:fixed; inset:0; pointer-events:none; opacity:.3; background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px); background-size:40px 40px; mask-image:linear-gradient(to bottom,black,transparent 75%); }
.page-shell { position:relative; min-height:100vh; display:grid; place-items:center; padding:48px 20px; }
.profile-card { width:min(100%,560px); text-align:center; animation:page-in .7s cubic-bezier(.2,.75,.2,1) both; }
.brand-mark { width:190px; min-height:66px; margin:0 auto 22px; display:grid; place-items:center; padding:13px 18px; border:1px solid rgba(255,255,255,.13); border-radius:18px; background:#ed1c24; box-shadow:0 18px 55px rgba(237,28,36,.18); animation:logo-in .8s .08s cubic-bezier(.18,.9,.3,1.2) both; }
.brand-mark img { display:block; width:100%; height:auto; }
.eyebrow { margin:0 0 12px; color:#ED2024; font-size:12px; font-weight:800; letter-spacing:.22em; }
h1 { margin:0; font-size:clamp(31px,7vw,48px); line-height:1.06; letter-spacing:-.045em; }
.intro { max-width:440px; margin:18px auto 30px; color:var(--muted); line-height:1.65; font-size:15px; }
.link-list { display:grid; gap:12px; }
.link-card { position:relative; display:grid; grid-template-columns:48px 1fr 28px; align-items:center; min-height:76px; padding:13px 16px; color:var(--ink); text-decoration:none; text-align:left; border:1px solid var(--line); border-radius:18px; background:rgba(20,13,13,.88); box-shadow:0 12px 35px rgba(0,0,0,.12); backdrop-filter:blur(12px); transition:transform .22s ease,border-color .22s ease,background .22s ease; overflow:hidden; animation:card-in .55s cubic-bezier(.2,.75,.2,1) both; }
.link-card:nth-child(1){animation-delay:.16s}.link-card:nth-child(2){animation-delay:.23s}.link-card:nth-child(3){animation-delay:.3s}.link-card:nth-child(4){animation-delay:.37s}.link-card:nth-child(5){animation-delay:.44s}.link-card:nth-child(6){animation-delay:.51s}
.link-card::before { content:""; position:absolute; inset:0 auto 0 0; width:3px; background:var(--accent,var(--yellow)); opacity:.85; }
.link-card:hover,.link-card:focus-visible { transform:translateY(-3px); border-color:color-mix(in srgb,var(--accent,var(--yellow)) 55%,transparent); background:#211010; outline:none; }
.icon { position:relative; width:38px; height:38px; display:grid; place-items:center; border-radius:12px; background:color-mix(in srgb,var(--accent,var(--yellow)) 15%,transparent); color:var(--accent,var(--yellow)); font-weight:800; font-size:13px; transition:transform .25s cubic-bezier(.2,.8,.2,1); }
.icon img { width:21px; height:21px; display:block; }
.web-icon { font-size:0; border:2px solid var(--yellow); transform:scale(.58); background:transparent; }
.web-icon::before,.web-icon::after { content:""; position:absolute; border:1.5px solid var(--yellow); border-radius:50%; }
.web-icon::before { width:12px; height:31px; }.web-icon::after { width:31px; height:12px; }
.link-card:hover .icon,.link-card:focus-visible .icon { transform:scale(1.1) rotate(-4deg); }
.link-card:hover .web-icon,.link-card:focus-visible .web-icon { transform:scale(.64) rotate(8deg); }
.link-copy { min-width:0; display:flex; flex-direction:column; gap:3px; padding-left:2px; }
.link-copy strong { font-size:15px; font-weight:700; }
.link-copy small { color:var(--muted); font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.arrow { color:#77796f; font-size:20px; text-align:right; transition:color .2s,transform .2s; }
.link-card:hover .arrow { color:var(--accent,var(--yellow)); transform:translate(2px,-2px); }
.location { --accent:#ED2024; min-height:86px; } .location .link-copy small { white-space:normal; line-height:1.4; }
.instagram { --accent:#e85c9a; }.facebook { --accent:#5f91f5; }.linkedin { --accent:#0A66C2; } .linkedin-icon { background:#0A66C2; color:#fff; font-family:Arial,sans-serif; border-radius:8px; } .linkedin-icon span { font-size:20px; font-weight:700; letter-spacing:-1px; transform:translateY(1px); }.youtube { --accent:#ff5b55; }.website { --accent:var(--yellow); }
footer { margin-top:28px; color:#77796f; font-size:11px; letter-spacing:.08em; text-transform:uppercase; }
.pulse { display:inline-block; width:7px; height:7px; margin-right:8px; border-radius:50%; background:var(--yellow); box-shadow:0 0 0 4px rgba(237,28,36,.14); }
@keyframes page-in { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:none} }
@keyframes logo-in { from{opacity:0;transform:translateY(-12px) scale(.9)} to{opacity:1;transform:none} }
@keyframes card-in { from{opacity:0;transform:translateY(18px)} to{opacity:1;transform:none} }
@media (max-width:480px) { .page-shell{padding:28px 16px}.brand-mark{width:168px;min-height:58px;margin-bottom:18px;padding:11px 16px}.intro{margin:15px auto 24px}.link-card{min-height:70px;padding:11px 13px;grid-template-columns:45px 1fr 24px;border-radius:16px}footer{margin-top:23px} }
@media (prefers-reduced-motion:reduce) { * { scroll-behavior:auto!important; transition:none!important; } }